,Tutorial files available at: 

webdesignermag.co.uk/tutorial-files 
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BUILD MOBILE APPS 
WITH PHONEGAP 

Compile your creations with 
Hydration and the power of Git 


IMPROVE YOUR 
WORKFLOW WITH YEOMAN 

Use the Yeoman toolset to build 
beautiful webapps fast 


CREATE 30 

ANIMATIONS WITH CSS 

Use Sprite3D to render 
animated 3D scenes 
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The UK's most advanced 

RESELLER HOSTING 




Increase your income and develop 
long lasting relationships with your 
clients. 



100% YOUR BRAND 

Customise every aspect of your reseller 
hosting with fully white label features 



CREATE CUSTOM PLANS 

Control everything from web space and 
bandwidth to prices and features 



UNLIMITED EVERYTHING 

Unlimited web space and bandwidth to 
let you host as many sites as you want 


« „ CUSTOMER SUPPORT 

100% UK Support, 24 hours a day from 
our in-house customer support team 


YOUR CLIENTS DESERVE 

GREAT HOSTING 


Our award-winning Reseller 
Hosting package has been 
developed for web designers, 
developers, freelancers, agencies 
and web professionals to provide 
clients with high performance, 
stable and secure hosting. 



EXCLUSIVE RESELLER DISCOUNTS 


25% 

OFF 

Dedicated Servers, 

VPS and SSL Certificates 

50% 

OFF 

Hosted Exchange 
and Premium Email 


30% 

OFF 

Bulk Domain Names 



From 

only 


£29 


.99 per month 


V FREE & INSTANT SETUP V NO HIDDEN FEES V EXCLUSIVE RESELLER DISCOUNTS 


# heart internet 

www.heartinternet.co.uk 


cau us now 0845 644 7750 

Find out more www.heartinternet.co.uk/reseller-hosting 


Prices exclude VAT. 
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Welcome 
to the issue 


rHE WEB DESIGNER MISSION! 


Ml To be the most accessible and 
inspiring voice for the industry, 
offering cutting-edge features 
and techniques vital to . 
building future-proof i Russell 
online content ill! 



Highlight 



I : We opened up 
with the idea that 
we would work 
while trying to find 
‘real job 

The masterminds behind 
Teehan+Lax walk us through a 
‘happy accident’ that turned 
into one of today’s hottest 
digital agencies 
Page 32 


Web design - one size no longer fits all 


he Nineties were simpler times, 
weren’t they? Although your desk had 
to support their substantial load, 
yesteryear’s CRT monitors kept things 
nice and simple. Whatever you 
designed it would fit on their bulbous, 
flickering screens just as you intended. 
As Richard Lamb laments in our epic 
cover feature this issue, technology has since played a 
series of cruel tricks on us. Today’s web creations enter a 
far more complex world where smartphones, tablets and 
other mobile technologies rule. One size no longer fits all. 

While there’s still plenty of weight to the argument 
that mobile and desktop experiences should be 


handcrafted separately (you only need visit our 
exclusive behind-the-scenes with Teehan+Lax over on 
page 32 to find a compelling account), or that 
responsive design is little more than a fad, a formula 
that sits well with the large and the small has 
nevertheless emerged. The web design equivalent of 
the grand unified theory didn’t take long to evolve from 
the old standard model, either, and within a very short 
space of time we’ve reached a point where Google and 
Bing both advocate responsive design. 

So what to do? Regardless of whether you want to 
make an existing site responsive or start a project from 
scratch, we highly recommend you take a look at 
Richard’s article starting on page 40... 


11 Todays web 
creations enter a far 
more complex 
world where mobile 
technologies rule ii 


Follow us on Twitter for all the news & conversation @WebDesignerMag 
Visit our blog for opinion, freebies & more® www.webdesignermag.co.uk 



Excitographic 

Plotting the features that got us 
in a frenzy over the month... 

^ Steve Jenkins, Features Editor 
Russell Barnes, Editor 
A William Shum, Designer 
A Ben Martin. Sub Editor 


Turn over to the contents to 
discover what’s going to get you 
excited this issue... 




































| contributors 


This issue’s panel of experts 


Welcome to that 
bit of the mag 
where we learn 
more about the 
featured writers 
and contributors. 


[Richard Lamb] 
demonstrates how to 
become an every- 
screen expert 



Richard Lamb is a web designer, writer, and lifelong movie buff. When he’s 
not engaged in any of the above, he’s probably asleep or staring at his 
Android. This issue he reveals his talents for the art of responsive design 
and demonstrates how to become an every-screen expert. Page 40 



Christopher Peri 


Mark Shufflebottom 


Sam Hampton-Smith 


Christopher is new to the 
Web Designer stable, but 
IBP 1 he has been working with 
B^jr rich-media webapps since 
1995. He is also the author 
of ...the Twitter API in 24 
-' hours, making him perfect 
for our feature on the new 
Twitter API. Page 86 



Mark is the programme 
leader of BA (Hons) Digital 
Media Design at 
Bournemouth University and 
an Adobe Education Leader. 
This issue he demonstrates 
how to produce responsive 
animations with Adobe Edge 
Animate. Page 58 



A Web Designer stalwart 
and keen supporter of web 
standards, Sam loves to get 
the most out of HTML and 
CSS. This issue he reveals 
how to create some 
attractive 3D scenes using 
the lightweight Sprite3D 
JavaScript library Page 68 


Jeffrey Way 


Tim Stone 


Jayson Winters 



Jeffrey is a developer, 
instructor and author who 
works for Envato (envato. 
com). This issue he gives an 
insight into Yeoman, the 
new and exciting platform 
that helps designers and 
developers handle a 
modern workflow. Page 72 



Tim Stone is a front-end 
developer with a first-class 
degree in Interactive Media 
Production. This issue he 
tackles CSS Transforms to 
create a 3D object, and 
shows us how to ease server 
loads with the Page Visibility 
API. Page 96 



Jayson is the creative lead 
at bracedesign.co.uk and 

develops Word Press sites 
for a variety of businesses. 
He likes to look under the 
hood, and in this issue 
explains what Word Press 
does with images and how 
to regain control. Page 52 


Adam Smith 


Matt Gifford 



Adam is the resident expert 
on our sister publication 
Advanced Photoshop. He 
loves to demonstrate how to 
recreate the latest graphic 
technigues. This issue Adam 
takes inspiration from TRON 
and shows us how to get 
cool sci-fi effects. Page 82 



Matt Gifford is a lead RIA 
consultant developer and 
industry author from 
Cambridge. He has over ten 
years’ industry experience 
and this issue demonstrates 
automated mobile app 
development with 
PhoneGap Build. Page 92 
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online the easy way. It doesn't matter if you're web savvy or a complete beginner, we've got the perfect 
solution for you. 

These days if your business does not have a website you could be missing out, let 123-reg help you 
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20 Lightbox 

Three sites that make the web that bit better 

26 Design diary: Coloud 
Headphones 

Oakwood recounts their three month 
project for Coloud Headphones 

32 Teehan+Lax: 

A happy accident 

The creation of this renowned digital agency 
was little more than a happy accident... 

40 Cover: The art of 
responsive design 

Learn how to convert your site or make 
a new responsive design from scratch 

72 Modern workflow with Yeoman 

Say hello to Yeoman, the faster way to 
make webapps 
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• 120+ minutes of pro video tutorials 

• 10 responsive templates 

• 44 Lightning Bolt vectors 

• 20 Grunge brushes 



A comprehensive collection 
of free designer resources! 




<tutorials> 

Web gurus take you step-by-step 
through professional techniques 

52 Optimise your images 
for Word Press 

Manage the size and quality of your pictures to improve 
load times and image SEO 

58 Create responsive animations 
with Adobe Edge 

Learn how to make your web animations adapt to the 
screen width of the viewers device 





Responsive animation Spin up some 3D with CSS 


62 Master CSS 3D Transforms 

Create a 3D spinning cube that reacts to user input with 
CSS 3D Transforms 

68 Make a 3D scene with the 
Sprite3D JS Library 

Render a simple 3D scene using little more than CSS and 
our handy step-by-step guide 




ope 

Dedicated 15-page section offering 
features and tutorials for coders 


96 Improve site efficiency with the 
Page Visibility API 

Take the load off the server with these essential 
power-saving techniques 


Mark Shufflebottom shows us 
how www.divabymakole.at 
achieves its wow factor with a 
clever combination of design 
and interactivity 

82 Create sci-fi effects 
in Photoshop 

Adam Smith uses 
www.disney.co.uk/tron 
to demonstrate how easy it is to 
create impressive sci-fi effects in 
Photoshop to give your 
creations a truly futuristic twist 
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How do the new Twitter API guidelines affect you? 
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Streamline your workflow and compile mobile 
apps with ease with this cloud-based service 
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Master CSS 3D Transforms with our help 


Web workshop 
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Discussing the hottest topics in the web design world 

If you have a creative project, new web product or great designer story, contact the editorial desk 

0webdesigner@imagine-publishing.co.uk 0 @WebDesignerMag 


Optimise 
for mobile 
now 

New figures from 
MobileThinking.com 
shows mobile is as 
important as desktop. If you’ve not 
gone mobile yet, now’s the time... 


I t’s hardly a secret that mobile 
browsing is overtaking desktop 
browsing. According to figures 
from mobithinking.com, there are 
currently over 6 billion mobile 
subscribers worldwide, and more 
importantly, nearly 30 per cent of 
users are accessing the web through 
their mobile device. This figure is only 
going to rise, and it will be a very long 
time before it reaches saturation point. 

Being ready for mobile is not an 
option anymore, it is a must. Any 
business that doesn’t adapt is almost 
certainly destined to get left behind. 
How an individual or business adapts 
is open to preference but, whatever 
direction is chosen, it is a direction 
that really needs to be adhered to. 

There are some simple facts that 
should persuade those who have yet 
to make the leap. At Apple’s 2012 
Worldwide Developer’s Conference, 
Apple CEO Tim Cook announced that 
the App Store boasts 400 million 
accounts with registered credit cards 


and 650,000 available apps to 
download - as well as stating that 30 
billion apps had been downloaded. 

Helping this staggering figure is of 
course the iPad. According to a survey 
by brand identity firm RichRelevance, 
found that mobile accounted for over 
nine per cent of all shopping revenues 
in the UK - the iPad accounting for 82 
per cent of shopping revenues in the 


UK, and 89 per cent in the US. What 
are they buying? Its almost irrelevant, 
but certain products sell better than 
others. Apparently, the popular choice 
for iPad shoppers is washing 
machines. For those shopping on an 
iPhone its a non-Apple tablet - would 
that be the Nexus 7? 


More importantly, what time of the 
day do users shop online? According 
to the same survey, the peak buying 
times are 4pm and 8pm, and the most 
popular 10pm. This tells its own story. 
When the day is done and the evening 
has been dealt with, users relax and 
shop from the convenience of home. 

To add some weight to the issue, 
Web Designer performed a quick 


straw poll amongst a range of 20-45 
year old friends and colleagues. This 
revealed that almost 100 per cent of 
them bought online regularly. Why? 
Convenience. The High Street may be 
preferable for many, but often these 
trips are just to browse. You’re almost 
certain to find better deals online. 


The reasons for going mobile are 
hard to ignore, so what’s the next step? 
The same as any desktop website, its 
all about getting seen. We have 
already mentioned apps and the 
Apple store, but of course you cannot 
forget Android. Google recently 
announced that Google Play had 
surpassed 25 billion downloads. 

Forgetting apps, mobile SEO is 
another crucial element of the 
process. Check out the top tips from 
SEO experts Found (www.found. 
co.uk). This will help ensure that your 
site gets seen on mobile screens. 

Before we finish, we simply cannot 
forget the biggest search engine on the 
planet, Google. They know exactly 
how profitable the mobile arena can 
be, having accumulated over $2.5 
billion in mobile advertising alone. If 
you want a slice of that sort of action, 
make sure your web presence is 
perfectly pitched for mobile. It has 
probably just become more important 
than your desktop. 


If Mobile accounts for over 
nine per cent of all shopping 
revenues in the UK § 
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news 


Tablet shipments 

With the holiday season fast approaching 
shipments for all the major manufacturers are 
go. The new iPad, iPad mini, Kindle Fire, Kindle 
Fire HD, Google Nexus, and Samsung Galaxy 
I Note are all on the list for Christmas 




» Note are all on the list ft 

IBB 

Apple 


Samsung 

2.5m 


Amazon 


ASUS 


14.5% 

Other 


Market share 

\ 18% 

\ Samsung 


\ 8.5% 

••• ASUS 


9% 

Amazon 



50% 

Apple 


Source: idc.com 


Mobile browsers 

The top mobile browser across all territories is 
Android. Sitting behind the Google-powered OS is 
Opera (worldwide), but this changes dramatically 
when looking at the European market 


22 % 


Android 


35 % 


iPhone 

Source: gs.statcounter.com 


Opera 


20 % 

10 % 


Android 




COMMENT 

Keith Horwood 

Head of SEO, Found 

Over half the UK population now 
use smartphones and, with tablet 
usage increasing month on month, 
knowledge of how mobile devices are treated in search is 
important for both eCommerce and content-led sites. And users 
aren’t just browsing on their mobile devices; by and large they 
are searching for information - making visibility on the right 
terms within the search engines all the more important. With 
the continual introduction of more tablets, it is important to 
create a user experience worthy of every form factor and to 
consider SEO strategies that have both thematic consistency 
and impact across all devices. As a result, SEO strategies should 
be adjusted to respond to the different needs of mobile users, to 
the manner in which they are searching, the device they 
are searching on, and the content they are seeking. 


99 


10 quick tips on mobile SEO 

Make your website pop out, no matter the device 


E Segment your mobile 
traffic in analytics 

Understanding mobile traffic is essential 
for developing the correct mobile 
solution for your visitors. Mobile users 
could be interacting differently to your 
desktop visitors. 

Test your site for mobile 
There are some great tools out 
there to assist with this: bit.ly/Uh5pQV 
and responsive.is are two sites we 
particularly like. 

Be device agnostic 
Provide a great experience to 
every mobile user, whether they are 
using a tablet or a smartphone. Google 
has equally indicated that it prefers 
responsive design. 

Understand mobile 
keyword volumes 

Use the Google Adwords keyword tool 
and select mobile devices to give an 
indication of which keywords you should 
target based on mobile search volume, 
adwords.google.com/o/keywordtool. 
Test your mobile site speed 
Loading times are part of 
Google’s algorithm. Use Google Page 
Speed Insights, and select mobile. Aim 
for less than two seconds. bit.ly/QYd6aC. 
Make use of the canonical tag 
If serving the same content on 
different URLs for mobile, make sure 
there is a canonical tag to the main URL. 



Use mobile SEO Sitemaps 

Much like standard Sitemap, a 
mobile Sitemap contains URLs that serve 
mobile content. Ensure Google knows 
about your mobile pages by submitting 
Sitemaps to webmaster tools. 
bit.ly/HxFErW. 

Implement social- 
friendly design 

Make sure social buttons such as 
Facebook and Twitter work and load 
quickly. When sharing via your social 
channels, check this content displays 
correctly. This goes for email too. 

Utilise click to call 
If users are using a smartphone, 
then by placing your business’s phone 
number in a link, they can call that 
number directly. This eliminates a barrier 
to the user contacting you. Paid search is 
also great for testing click to call usage. 

Think local with mobile content 
95 per cent of mobile users will 
search for local information. Make sure 
that you create content for this exact 
purpose, and also make sure it is 
optimised for mobile. 
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Discussiiig the hottest topics in the web design world 


Believe 
the hype 

Over 50 per cent of designers and 
developers are already using 
HTML5, and over 30 per cent will 
switch over the next year... 


H TML5 has long been touted as 
the saviour of web design, and 
not without reason. Its rise has 
not been as rapid as some might have 
hoped, but adoption is on an upward 
curve. The recent decision by Facebook to 
ditch it in favour of native code for its 
iPhone app has brought it more attention. 
This decision raises the question: why is 
there is a need for a shift, and how do 
those in the field see its future? 

A recent survey sponsored by Kendo 
Ul revealed that 82 per cent of developers 
thought HTML5 would be important to 
their job over the next 12 months. 

The reasons for adopting HTML5 
varied, but the most popular proved to be 
the familiarity of languages. Sitting a close 
second was reach and cross-platform 
support. Other reasons were availability of 
tools and libraries, productivity, open 
standards, and cost of development. 


The economic benefits of using a free 
open standard platform are obviously 
very attractive. Plus, strong support 
among the developer community and big 
industry support makes developing with 
HTML5 even more of a no-brainer. The 
only downside was browser fragmentation 
concerns, but even this was relatively low 
with 35 per cent being ‘concerned’. 

Do the findings of the report come as a 
surprise? In our opinion, not really. We 
know that much of the design and 
development community have different 
opinions on the use of the HTML5. Many 
feel that it is still too immature for the 
more intensive tasks currently occupied 
by Flash. But, with the almost complete 
lack of support for Flash, especially on 
mobile devices, it is only a matter of time 
before HTML5 takes the helm. 

To take a look at the complete survey 
visit bit.ly/St8eLf. 


When do you think 
HTML5 will be 
important to your job? 

One of the questions asked in the survey reveals 
how important the spec is to developers 

www.kendoui.com 



Kendo Ul 

fBk ““t f-iKi 



A Kendo Ul sponsored report reveal how popular HTML5 is 



Go digital at the 
Imagine superstore 


Visit Imagine Publishing’s supersite 


greatdigitalmags.com and get Web Designer 

on your favourite digital platform 


Imagine Publishing’s partnership with Zinio means 
that Web Designer is now available for PC, Mac, 
iPad, iPhone, Android, Blackberry and Web OS. 

You can now get Web Designer wherever you 
are and take it with you. Read all the latest 
cutting-edge practical projects, features, 
interviews and inspirational design showcases in 
your favoured digital format. 

Zinio provides the apps (gb.zinio.com/apps/ 
index.jsp) you need to get the best on-screen 
reading experience, while Web Designer provides 
the unmissable content. 


<news <:loud> 


Bite-sized coverage of the month’s trending topics 

W3C publishes draft for 
new Push API 

The web standards community has published a 
working draft for push notification for web 
applications. Currently, there are a number of 
different options for sending push notifications. The 
new draft looks at several protocols with a view to it 
becoming a standard. 


A set of tools for 
buildingjQuery 
apps 


Ignite Ul 

W3C Firefox 

WordPress Google 


Mozilla is to launch its own 
OS starting in Brazil in 2013 


Web publishing giant now accepting the 
payment solution Bitcoin 


Check out the 100,000 stars 
Chrome experiment 


Windows 7 
getsIElO 


The latest version of the 
third-most popular browser in 
Europe is making its way to 
Windows 7. Internet Explorer 
10 is currently available with 
Windows 8, but only a preview 
version is available for 7 users. 
Remember, it’s not available 
for Vista. If you want to try it 
out, visit bit.ly/gdPYck. 
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Win a Nexus 7 

Take part in our readers’ survey at: 

www.webdesignermag.co.uk/survey 


§ § What would make you 
want to subscribe? IP IP 



■ ^I! IP Whats your favourite 

^ part of the magazine? 99 

Enter now for your chance to 
own this amazing tablet! 

All you have to do is complete our five-minute survey 
telling us what you think of the magazine 

See the website for full terms and conditions 
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give you even more reason to trust 1&1 for all your hosting needs. 


V GEO-REDUNDANCY FOR MAXIMUM RELIABILITY 


Your website data is stored separately 
in two high-performance 1&1 Data 
Centres. Plus, automatic daily backups 
included. 


SITELOCK.COM 


With SiteLock your website is automatically 
scanned for harmful malware, viruses and other 
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on your website, showing your customers that it is credible and 
trustworthy. 


MEMBER OF 


united 

internet; 


DOMAINS E-MAIL | WEB HOSTING eCOMMERCE SERVERS 


*12 month minimum contract term applies. Visitwww.1and1.co.uk for full offer details, terms and conditions. Prices exclude VAT. 









12 MONTHS 

50% OFF ALL 

1&1 HOSTING PACKAGES 
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5 GB Webspace 

50 GB Webspace 

Unlimited Webspace 

Unlimited Webspace 

1 MySQL 5 Database 
(1 GB each) 

10 MySQL 5 Databases 
(1 GB each) 

100 MySQL 5 Databases 
(1 GB each) 

Unlimited MySQL 5 Databases 
(1 GB each) 

1000 e-mail accounts (2GB) 

3000 e-mail accounts (2GB) 

5000 e-mail accounts (2GB) 

Unlimited e-mail accounts (2GB) 

- 

- 

1 domain included. Choose from 
.co.uk, .me.uk or .org.uk 

1 domain included. Choose from 
.co.uk, .me.uk or .org.uk 

PHP 5, PHPDev, Zend Framework 

PHP 5, PHPDev, Zend Framework, 
Perl, Python, Ruby, SSI 

PHP 5, PHPDev, Zend Framework, 
Perl, Python, Ruby, SSI 

PHP 5, PHPDev, Zend Framework, 
Perl, Python, Ruby, SSI 

Unlimited Traffic 

1&1 Click & Build Apps: Wordpress, Joomlal®, Drupal™ and more 

1&1 Security: Geo-redundancy, SiteLock protection and Webspace Recovery 

24/7 phone and e-mail support 

L^ £ 1- 19 

*W | per month* 

^ £5.49 

per month* 

^ £5.49 

i IgpF per month* 

1 ^ £4.99 

1 dr per month* 




1&1 Data Centres are powered by 
renewable energy, reducing our CO 2 
emissions by 30,000 tons every year! 


1&1 



Call 0844 335 1211 or buy online 


www.1and1.co.uk 
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Your emails, tweets, forum comments. The social network, but in print 

This month we reveal how to get to grips with UX and explain why WordPress beats WebPlus X5 hands down... 


sublet Time for a change? 

From Jack Niven 



For quite a long time now HTML5 has been 
flagged up as the technology that all web 
designers and developers need to know. I 
have been using HTML for a couple of years 
and haven’t bothered to make the transition to 
HTML5 yet -1 am still using div tags with 
comments. What I’d like to know is, do I really 
need to start using HTML5 and, more 
importantly, will it make any difference? 


The simple answer to both questions is yes. 
Using div tags instead of semantic HTML5 
tags will not make any difference to what is 
seen on the page, but when designing and 
developing the use of semantic HTML5 tags 
can make a massive difference. Reading 
code will become more straightforward 
and it will improve your workflow. We 
suggest you make the switch now, Jack! 


subject UX is the future 

From Lutfi Qaraman 


WebKit 

Discover the 
techniques to help 
create inspirational 
and interactive 
webpages 



Master Photoshop 
for web design 

bitly.com/Tjqgyl 



Beginner's guide to 
HTML5 Canvas 

bitly.com/SgWpYM 




I must start by saying thanks a 
lot for all the great work you do 
- it really helps me. 

I’m working in the web 
industry at the moment but I’m 
looking to change my position 
and I’m interested in web UX. 
Please can you advise me about 
how to become an expert in UX? 
Which skills do I need, what 
resources are out there, where 
can I start? In fact - I need to 
learn everything! 

The first step is to get a few 
books to read through, Lutfi. 
Smashing UX Design is a good 
start; it is a practical reference 
and introduces techniques, 
tools and general practices. For 
something more advanced try 
The UX Book by Rex Hartson 
and Pardha Pyla. A couple of 
sites worth checking out are 
uxmag.com and uxmyths.com. 
UX Magazine has plenty of 
articles and suggested 
seminars, while UX Myths 


reveals a few home truths 
about UX design. 

The ideal scenario would be 
to take up a junior position at 
an agency and learn the UX 
process from the experts. 

s..bje<:i Web-based 
web design 

From Felix Marcos 


I am completely new to your 
magazine, and I’d like to ask you 
for some advice. I’ve built a small 
website offering some IT services 
with Serif WebPlus X5, but I’m not 
at all happy with the result and the 
limitations of this software. Ideally 
I’d like to be able to build a proper 
website with web-based tools, so I 
can modify the website from any 
computer at any time. I’ve been 
advised to use WordPress, and 
hence my email to you. What 
web-based tool would you 
recommend? Is WordPress a good 
alternative or am I going to find a 
lot of limitations? I just want to 
avoid wasting a lot of time trying to 
build the website with WordPress 
only to find out that it’s not the 


best option after all. Thank you 
very much in advance. 

There is no doubt that 
WordPress is a great tool and 
definitely a step up from Serif 
WebPlus X5. New users can 
either download WordPress 
and install via a webhost, or 
there is the option to use 
WordPress.com. If you already 
have a webhost we would 
suggest that you go for the 
download and install option 
(wordpress.org/download); 
this offers much more flexibility 
and general control. 

The power of WordPress lies 
in its themes and plug-ins. 
There are thousands of themes 
available - both free and 
pay-for ones. A good place to 
start for free themes would be 
www.dessign.net, or try 
themeforest.net for premium 
themes. There are plug-ins for 
almost every occasion, which 
are free from wordpress.org/ 
extend/plugins. All these 
elements combined should 
give you everything you need. 
Plus, if you are happy tweaking 
HTML, CSS and PHP, a theme 
can be customised to suit. 

subject Code for 
newbies 

From Sarah Mitchell 


I love your magazine - it has 
been a great help in my quest to 
learn web design, but I have one 
request. I love the Web 
Developer section but it’s a bit 
advanced for me. Do you think 
that you could do something on 
code aimed more at beginners 



10 must-know 
Sublime Text 2 tips 

bit.ly/QA4DJK 


M ...if you are happy tweaking HTML, CSS and 
PHP, a WP theme can be customised to suit if 
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or beginners’ guide? It would be 
much appreciated. 
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Thanks for the suggestion, 

Sarah. It’s something we have 
considered before and an idea 
that we are keen to implement at 
some point in the future - so 
watch this space. 

subjed Print or digital? 

From Christian 


I really can’t make up my mind 
which to subscribe to: the print 
version or the digital version? So 
I’m going to let you decide for me. 
Looking forward to your reply. 

Only you can decide! If you have 
a tablet and are often on the 
move then the digital version 
(www.greatdigitalmags.com/ 
webdesigner) makes sense. But 
if you want something to keep 
on your shelf, the print version 
has to be the preferred choice. 


Defining the Internet 
th rough beautiful! 
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Comments from the Blog 


• Web Designer is always 
keen to hear from its 
readers. Here we bring 
together a few of your comments 
including some thoughts on our 
‘Photoshop for web designers’ 
article (http://bit.ly/Tjqgyl)... 




Jason said: I'd like to know 
who said that Drop Shadows 
were no longer excused? If 
used correctly they can have 
the right impact on a design 

mina said: Cool article. I like PS 
to the bottom of my heart 


A specially selected collection of tweets 
from our 21,000+ Twitter followers 





@Freesponsive 
@WebDesignerMag do you 
know of an accepted way to 
load JavaScript conditionally 
based on @media screen 
size? (for #responsive dev) 

@iGeorgeTaylor 
@WebDesignerMag 
thanks for helping me 
learn how to use CSS3 
effectively;) 


o 


@george_byrom 
@WebDesignerMag, I love 
your mags, but please can you 
do a section for people who 
have just begun learning code 
- Code for Beginners, maybe? 

@TheWebPsych Just written an 
opinion piece for my favourite 
web design magazine - 
@WebDesignerMag - which is 
out in December (issue 204). 
Utterly thrilled! 
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Charlie Lawson is the national 
director of BNI, the UK’s largest 
business networking and referral 
organisation. As a widely 
recognised expert on the power 
of ‘word of mouth marketing’ 
Charlie is a public speaker, 
trainer and blogger on 
the subject. 


Charlie Lawson 


The best net 
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Networking isn’t just about meeting people, it’s so much more 


N etworking is about making new contacts that you can do 
great business with, getting better quality business, 
building a valuable support network; and it’s also about 
personal development. But how are these things useful to web 
designers and why should you be networking? 

Unsurprisingly, over the last ten years, web agencies have 
become one of the most popular start-up companies in the UK. With 
an estimated 182 million websites over the world it seems like you 
can’t go wrong by setting up a web design business. 

However, keeping business continually coming through the door 
can sometimes prove difficult. Networking is about so much more 
than just meeting people: new contacts can turn into clients and 
those new contacts may know people who turn into long standing 
clients, which results in an increase in turnover for your business. 
BNI member Jon Withers told me: “Our web agency. Rocket Mill, has 
been built upon networking. The business we win from it sticks and 
we build great long-term relationships through the process.” 

It’s not just about who you want to do business with either, but 
who wants to do business with you. By networking you’re increasing 
your visibility among your local business community and spreading 
the word about your business to a wealth of contacts. Every time 
you meet with your network, you aren’t just meeting with a group of 
business people; you’re networking on a much wider scale. If you 
think that on average each person knows 1,000 people, in a room of 
50 people, that’s 50,000 potential clients you could be designing a 
website for. Is that something you can afford to miss out on? 

If you’ve ever had a client that you wish you had never become 
involved with then you’ll appreciate my next reason as to why you 
should be networking. Through networking you don’t just meet 
potential business contacts; you meet the right ones, the good ones, 
the ones with whom you want to work. 

Business passed at networking groups comes from reliable and 
trustworthy sources, which means you can put your mind at ease. 
Knowing that the person with whom you will be working with comes 
with a solid reference is worth its weight in gold. You can ask the 
important questions as well and get truthful answers: are they likely 
to pay on time, will they take your advice on board, is their business 
doing well? There isn’t a better recommendation than when it 


comes from someone who has had first-hand experience of working 
with the client already. It’s in the interest of the person passing on the 
reference to you to provide you with a good customer; if they 
continually pass bad business recommendations then it’s likely that 
work coming from their network will soon dry up for them. 

Networking isn’t primarily about making friends, but for many 
web designers, particularly for freelance designers and small 
agencies, it can be a guaranteed way to meet other like minded 
business professionals on a regular basis. Structured networking 
also allows you to get the most out of the people you meet. Your 
networking colleagues aren’t just there to give you business, they 
are also there to support you. 

Running your own business can be lonely, and having the right 
people on hand at the right time can make all the difference between 
running a business and running a successful business. You can turn 
to the accountant in your network to give you tax advice, to the HR 
consultant for when you need some workplace guidance and to the 
letting agent if you are thinking about moving your business 
premises. You need to network not just to grow your business, but to 
help you build a better business. 

Networking can also help you develop on a personal level and 
give you transferable skills which can be used every day in business. 
Presentation skills, which most networking groups offer training on, 
can be applied in every day circumstances. If you break into a sweat 
at the thought of standing up in front of a new client and presenting 
your business to them, then some practical skills learned from 
networking can come in useful. These will help you to relax and 
remain calm and confident in front of that important client, which 
can potentially help you win the pitch over your competition. 

Polishing your 60 second ‘elevator’ pitch is also taught through 
networking. With the web industry continuing to grow at an 
astonishing rate, being able to tell people not just what you do, but 
having the ability to explain what makes your organisation unique 
and what places you are above your competitors down the road in 
a succinct and clear way is priceless. 

Every web designer should be networking; it’s an essential part of 
business for so many different reasons and it can help your business 
on a multitude of levels. So, why do you need to network? 
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Pay As You Go 
Advertising 

Advertise on Google. 

Pay only when people click on your ad. 


For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you 
only pay when they click to visit your website. So you get exactly what you pay for - more customers. 
And because this is pay-as-you-go advertising, you have complete control. 



Control how much you spend 

You can set a daily spending limit and an amount you're happy to pay for people to click 
on your ad. The price is chosen by you, not us, so you never have to worry about going 
over your budget. 



Control who sees your ad 

Your ad will only appear when potential customers are searching online for relevant 
terms you've chosen to describe your business. 



Control where and when they see it 

You can choose to target your audience by location and time: attract local customers 
during your opening hours or, if you'd rather, promote yourself to a global audience 
round the clock. 


r 

Voucher missing? 

Don't worry, someone in your company may 
have beaten you to it. Track them down 
make sure their 

£25 is turned into £100* 

Offer only available to businesses in the UK. 

L ^ 



Don't miss out - try it today 
We'll turn your first £25 of advertising 
into £100*. To start attracting new 
customers today: 



Visit google.co.uk/adwords 



Or call 0800 169 0478 f 


+ Calls to 0800 numbers are free from BT landlines but charges may apply if you use another phone company, call from your mobile phone or call from 
abroad. Support is available in English only. Offer subject to website and business qualification. 

Terms and conditions apply. In order to activate this offer, you need to enter the promotional code through the Billing tab in your account before 
28/02/2013. Promotional codes have no promotional value and entry of the promotional code serves only to begin your qualification for the associated 
promotional credit. To qualify for the promotional credit you must accrue advertising charges in the amount of £25 within 31 days of entering your 
promotional code. For example, if you enter the code on 05/02/2013 you'll have until 08/03/2013 to accrue advertising charges in the amount of £25. 

In all circumstances, you must enter your promotional code before 28/02/2013 in order to activate this offer. Your account must be successfully billed 
by AdWords and remain in good standing in order to qualify for a promotional credit. The promotional credit will be applied within approximately 5 days 
of your account reaching the threshold for accrued advertising charges specified above, as long as you've activated your account using the promotional 
code and fulfilled all requirements stated in the offer. Once applied, the promotional credit will appear on the Billing Summary page in your account. 

For the complete terms and conditions, see http://www.google.co.uk/adwords-voucherterms. Google Ireland Limited, a company incorporated under 
the laws of Ireland, with company registration number 368047 and registered office address at Gordon House, Barrow Street, Dublin 4, Ireland. 
Copyright 2012. Google and Google AdWords are trademarks of Google, Inc. and are registered in the US and other countries. 


Google 



Nathalie, AKA The Web 
Psychologist, is an award-winning 
speaker and author. She helps 
businesses to psychologically 
optimise for better engagement 
online, and lectures 
internationally on the 
subject of web 
psychology. 


Nathalie Nahai 


make us click 
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Essential tips to target communicate and sell 


First, you need to know who you’re targeting. It sounds like a no- 
brainer. But when it comes to engaging with your audience 
persuasively, everything from the way they make decisions to their 
personality, age, gender, friends, cultural background and digital 
literacy can influence the effectiveness of the strategy that you use. 
Say you’ve designed a successful eCommerce site for a client in the 
UK, and due to a high number of overseas orders, they ask you to 
roll out the same site in Sweden. The age, gender and income level 
of your audiences are the same, but their cultures aren’t. 

What you may not know is that, unlike the Brits (who tend to be 
more assertive, achievement-oriented and competitive). Swedes 
generally tend to orientate towards the home, emphasising social 
cohesion, cooperation and a good guality of life achieved through 
consensus. In this case, rather than translating the same old site 
across both countries, you’d be best served adopting a culture- 
specific strategy. For your Swedish audience, this could mean 
designing a website that appeals to the wider group by using 
language and imagery that conveys a sense of inclusion. It could 
also mean focussing on the emotional benefits of your products as 
opposed to the material ones. 

Whoever you’re targeting, by being aware of differences that exist 
between groups and individuals, you can start building a picture of 
how one strategy (such as a high-octane, goal-oriented competition) 
could work well for one audience and badly for another. 

In our everyday lives, we’re constantly trying to persuade and 
influence people - whether we want them to agree with our point of 
view, to help us out, or to fulfil our needs in some other way. Online 
it’s no different. Whether you’re trying to get more click-throughs, 
subscribers or sales, in effect you’re using your skills to persuade 
other people to take a particular course of action. 

The heart of influencing people online is being able to 
communicate your message persuasively. There are countless 
blogs, books and videos that show various aspects of how we can 
do this, but in reality persuasive communication boils down to a few 
basic principles. 

We tend to be more easily persuaded by people we trust, and we 
tend to trust those who seem similar to us, or who have a good 
reputation to back them up. The impressions we make about others 


are heavily influenced by nonverbal cues, such as their facial 
expressions, gestures, and even the clothes they wear. Face-to-face, 
these cues are easy to pick up, but online, many of these are stripped 
away, making the game a whole lot trickier. 

That’s where demographic research comes into its own. If you 
have an intimate knowledge of the people you’re trying to reach, 
you can mirror back their preferences within your designs in order 
to build trust and boost rapport. For instance if you were trying to 
attract an audience of young, female entrepreneurs, the images, 
copy and videos you’d use should reflect the language, clothes, 
gestures and interests that come naturally to them. 

It sounds devastatingly simple, but by using the concept of 
similarity, you’re subconsciously showing your audience that you’re 
trustworthy, and that the actions you’re proposing are good ones. 

This last point is a crucial one. With all this talk of influence it’s easy 
to forget that the sustainable success of any business (both yours 
and your clients’) hinges on your ability to build and nurture good 
relationships. If you respect those you’re trying to communicate 
with, this will show - and they’ll be more inclined to want to engage 
with you as a result. 

When Spotify first came out there was a lot of chatter as to 
whether the model would ever really take off. The majority of people 
weren’t too hot on the idea, so Spotify made it easy for them - try it 
now, for free, and see what you think. Painless, effortless, and 
attractive, this no-risk offer appealed to early adopters and nay¬ 
sayers alike. I can attest to this first-hand - having tried the free ad 
version for a good six months, I eventually signed up. Not because 
the ads were annoying, but because I had come to value the service 
and, having been offered the free version in good faith, felt happy to 
pay a tenner a month for something I enjoyed and believed in. 

By giving everyone a go up front, Spotify not only reached a 
larger number of eager ears, they also gained long-term advocates 
who could then take care of the word-of-mouth and reputation¬ 
building. A win-win for all involved. 

Whatever your goals, and whomever you’re designing for, if you 
really want to engage with people at a deeper level, you have to 
understand what drives them. Especially when your business 
depends on it. 
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Peugeot HYbrid4 

http://graphicnovel-hybrid4.peugeot.com 

Development technologies PHR MySQL, jQuery, HTML5, CSS, Ajax 



Designer/developer Jean-BaptisteLoUVet/ 
Xavier Lucas www.betc-nfe.com 

The graphic novel genre comes to the world of 
car advertising, combining striking visuals and 
sound to deliver a strong marketing message 


he latest ad for the 
Peugeot HYbrid4 takes 
styling hints from 
popular culture. With 
comic-book adaptations 
now a regular fixture at 
cinemas, and the graphic 
novel continuing to grow 
in popularity, this brings 
these two cultural 
paradigms together in a 
highly effective and engaging site. 

Web designer Jean-Baptiste Louvet 
outlines his approach to the 

development of the site: “The backend 
is all PHP/MySQL (there are no plug-ins 
or Word Press involved here). The 
frontend, meanwhile, makes use of the 
holy trinity: jQuery, HTML5 and CSS. 

“We wanted to avoid page loading 
and keep navigation smooth (from one 
category to another, an excerpt to a full 
article, etc) and relied on Ajax calls and 


jQuery animations to achieve this.” 
Sound and arresting graphic imagery 
work hand in hand on this website, as 
each frame smoothly comes into view. 
The four threads of the storyline are 
perfectly integrated. As you move 
through the story, page reveals change 
direction to add interest and lend a 
dynamic feel to the static images. 
Incidentally, the guality of the graphics 
is excellent, with the artwork fully 
complementing the sound design. 

An increasing number of websites 
are looking for new ways to use the 
vertical scroll technigue. This Peugeot 
site illustrates how a few well-executed 
graphics - coupled with carefully 
considered audio - can come together 
to create a highly effective platform for 
ad messages. The developer and 
designer clearly understood the brief 
and came up with a design that is not 
only unigue but totally of the moment. 


##'This brings two cultural paradigms 
together in a highly engaging site if 



<2\bove> 

• Make sure autoplay is on and that your 
speakers are turned up to enjoy the full 
effect of this innovative design 


<Uelow> 

• Each of the four chapters of the graphic 
story is introduced by this image that links 
the chapter to the features of the car 
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Got it? Flaunt it! Tell us about your site ©webdesigner@imagine-publishing.co.uk 
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P6UCEOT 

IGEOT HYbrid4 




<Top left, clockwise*- 

• As each frame scrolls in the 
browser window the accompanying 
sound effects really bring the static 
images to life 

• The aims of the ad campaign are 
not forgotten, but overt marketing 
messages are quite subtle thanks to 
the exceptional graphics 

• Each image is supported with solid 
technical prowess that presents 
them seamlessly to the viewer 

• The developers have used the 
latest techniques to ensure each 
frame is exciting yet clearly 
communicates its message 



#667278 #27353D #79A7B5 



#774737 #EFCD7D #5A3C23 


abcABC 1234567890 

<Above> 

• The thin version of Unit is used across this 
website. Developed by Erik Spiekermann, it can 
be obtained from FontFont 


<Uelow> 

• When a heavier font was needed, Unit was used 
again for consistency, but a bolder version 

abcABC 1234567890 
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LIGHTg|gg Know a site that deserves to grace these pages? Tweet us now 0 @WebDesignerMag 



<Above> 

• As each new video is revealed new layers of sound are 
added to create a rich audio environment on the site 



<4\bove> 

• It’s important the viewer sets up their device for optimum 
visual and audio to receive the full effect intended 


<2\bove> 

• Each video panel is interactive in that you can control 
the sound and examine the product on display 


<2\bove> 

• The interactive elements are kept subtle to allow the video 
and audio to take centre stage as each panel is revealed 
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The Sound of Creation 

www.sound.philips.com 

Development technologies HTML5, CSS, Flash, Web Audio 




Designer James Britton, exec producer 
on The Sound of Creation project 

www.stinkdigital.com 


This website reveals just how powerful video has 
become to showcase a brand’s latest products 


s an exercise in HTML5 video, the 
new Philips site for its latest Fidelio 
range of products - particularly 
the Dolby soundbar - is, put simply, 
a tour de force. The Sound of 
Creation concept is expertly 
rendered on a site that offers 
numerous audio and visual treats. 

“The Sound of Creation is an 
interactive soundscape and video 
which acts as a metaphor for the 
creative process that Philips engineers go 
through when they create their products,” 
explains James Britton, who was executive 
producer on The Sound of Creation project. 
“We collaborated with Washed Out and director 
Gustav Johansson to create nine sound splits 
and video vignettes, which combine and allow 
visitors to explore and play with layers of 


imagery and music, and discover the featured 
Fidelio hero products’ design story.” 

It’s the immersive experience that really 
stands out when it comes to the design of this 
site. Stink Digital obviously understood what 
Philips wanted to communicate, but had to 
push the available technology, as James 
reveals: “From a technical standpoint, many of 
our projects reguire accurate manipulation of 
video and audio. We’re experimenting more 
and more with PITML5 video and Web Audio, 
but cross-browser compatibility is still a key 
reguirement for most of our clients.” 

Although showing what is possible with 
FITML5, it also uses Flash, which continues to 
offer many designers the ideal platform to 
realise their ideas. This site is a testament to the 
skills of the production team and how new and 
legacy web technologies can work together. 


<2\bove> 

• All of the products from Philips that are 
showcased on this site are just a click away 


<Uelow> 

• The single font Alt One WGL Volume is used 
throughout the website. Designed by Eric Gill, 
it can be purchased from the FontShop 


abcABC 1234567 


I I The Sound of Creation is an interactive 
soundscape and video which acts as a 
metaphor for the creative process that 
Philips engineers go through if 
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Know a site that deserves to grace these pages? Tweet us now Q@WebDesignerMag 
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Di Biasotto 

www.dibiasotto.com 


Development technologies Paper, pen, HTML editor JavaScript Ajax, 

Adobe Fireworks, Adobe Illustrator 



Designer Di BiclSOttO 

www.dibiasotto.com 

Bold and highly styled graphics that are 
packed with colour and dynamism shout 
about the skills this agency has to offer 


t’s great to see that this 
agency site has not 
succumbed to Vertical 
scrollitis* that seems to 
have befallen many sites 
in the last couple of 
years. Instead subtle 
animation is used with 
colourful and bold 
graphics to give the first¬ 
time visitor plenty to do, 
as they learn about the company. 

Before even one vector was defined 
in Illustrator, good old pen and paper 
were essential as Matthieu Biasotto 
reveals: “Well, we drank lots of coffee, 
but more importantly, we first defined 
the site with pen and paper. Once the 
layout was agreed, the illustrations 
were created and designed to be 
dynamic and colourful. These coupled 


with the animated components give a 
feel of motion graphics on each slide.” 

Clicking around the site reveals fluid 
and responsive pages that move the 
core navigation to create the feeling of 
motion. As the graphics change, the 
central navigation reveals essential 
information about the agency’s 
expertise. The motion graphics are 
understated yet lift what could have 
easily become just another static site 
from a design agency. 

Di Biasotto clearly understands how 
to make a statement. The central 
graphics are brave and unashamedly 
bold, which grabs the attention of the 
viewer, and prompts them to explore 
the site further. Animation is used, but 
not overwhelmingly. As a showcase for 
the talent of this agency, the site design 
delivers on every level. 


## The motion graphics are understated 
yet lift what could have easily become just 
another static site from a design agency ii 
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<2\bove> 

• Each new slide on the site presents 
its information via a central hub that 
smoothly opens as each page loads 
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<Above> 

This site uses Lato designed by tukasz Dziedzic in 
various weights. The typeface is a member of the 
Google Web Fonts family 


<2\bove> 

• The homepage hits you 
with its first bold and bright 
graphic that gives just a 
taste of things to come... 


<Top left, clockwise*- 

• A pre-header ensures the 
agency’s contact information is 

always available no matter 
which page is being viewed 

• More information about a 
service the agency offers is just 

a click away via the intuitive 
central hub that smoothly 
appears as each slide loads 

• You never get lost on this 
website as the visual location 
grid and the navigation icons 

are always close to hand 
• Gain an insight into how the 
agency works on the last slide 
of the site. The central wheel 
offers a wealth of information 
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Coloud Headphones 


How the creative geniuses at Oakwood built the online 
brand for Coloud Headphones... 


1ST Ul 

DEHtNS Ifl 


Project 
Web 
Agency 
Web 
Duration 
People involved 


Coloucl Headphones 

www.coloud.coin 
Oakwood 
oakwood.se 
3 months 
10 
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Coloud Headphones 








Mia Nilsson 

Lead design 

Mia Kristenson 

Project manager 

Joakim Flodman 

Creative direction 


BACKEND 

The frontend controls the 
user experience and the 
aesthetics, but its the 
backend that provides the 
building blocks and 
functionality. Technical 
director Vincent Boiardt 
explains that they don’t 
stick rigidly to a single 
solution, but tailor to suit. 
“Whenever we take on a 
new project, the technical 
solution is not obvious 
from the start. Even though 
we take pride in our 
expertise in certain 
platforms, such as 
WordPress, we never try to 
adapt our concept or idea 
to fit any technical 
platforms or restrictions. 

We put the biggest 
emphasis on the user 
experience and interaction 
design, so the biggest 
challenges were on the 
front-end development, 
and not so much on the 
backend. Zound Industries 
had an existing 
eCommerce platform that 
they used for the previous 
Coloud site, so it seemed 
logical to stick with the 
same platform. 

“Emil Sail, creative 
technologist at Oakwood, 
was the lead developer on 
the project and had the 
main responsibility from 
start to finish. The finished 
product really raised the 
bar of what’s technically 
possible to do on a 
eCommerce site, and the 
response from people 
using the site has been 
tremendous.” 


H ow do you take 

headphones and 
turn them into an 
engaging digital 
experience that 
enhances an emerging brand? A look at the 
Coloud web presence goes a long way to 
answering this simple and succinct question. 

Coloud teamed up with the Sweden-based 
creative geniuses at Oakwood to help turn 
their product into a digital work that embraces 
the brand. Oakwood was tasked with making 
sure that the web presence had a clear focus 
on usability. The brief gave the agency a 
broad remit on the direction Oakwood 
needed to take: ‘accomplish whatever goals 
[the] visitors might have, but this doesn’t mean 
that the website has to have the same look 
and feel as every other site out there.’ 

With a brief in hand it was up to Oakwood 
to seek inspiration and produce a masterpiece 
that didn’t look like any other site while 
adhering to the brief. No easy task. 

Inspiration comes in many forms, and 
instead of looking into the brand, products, 
cultural surroundings, and trying to 
communicate this through the design 
Oakwood decided to take a different direction. 
They wanted to create a presence that 
provided a ‘unique and memorable user 
experience’. The agency decided that they 
wanted ‘to marry emotional brand experience 
with eCommerce and usability’. 

The Coloud/Oakwood collaboration was 
not an entirely new experience for either side. 
Oakwood had been working with Zound 
Industries, the company behind Coloud 


headphones, for a long time, and has a close 
relationship regarding online activities. 

When Coloud Headphones decided it was 
time to launch an entirely new line of 
headphones and get a re-brand, it only 
seemed natural to approach Oakwood. 

Coloud knew what they were getting and 
Oakwood was more than happy to re-establish 
its previous acquaintance. 

A project always has a beginning, and of 
course an end, and Oakwood’s creative 
director Joakim Flodman reveals how the 
agency came together with Coloud to work 
on the project. 

“We have had the pleasure of working with 
Zound Industries, which consists of some 
brilliant people who are equally brilliant at 
creating and nurturing headphone brands. This 
is perfect for us, as a clear and strong brand 
vision makes it easier to have a clear goal for 
the design and user experience. 

“Because Coloud is a new brand and more 
or less unknown, the site has to set the tone for 
the future relationship between the brand and 
the potential brand fans. A site like this needs to 
have everything a corporate site has, as well as 
support for eCommerce to push conversion, 
campaigns, and new products. But most 
importantly we knew that we had to present 
the brand and products in a memorable way 
that also reflected the core values. 

“Coloud is all about technical simplicity and 
playfulness - two components that make up 
the perfect headphones. The company’s 
ideals are based on the philosophy that 
perfection is achieved not when there is 
nothing left to add, but when 



<Single-page sketc:lies> 

When it came to planning it was 
decided that a single page was the 
way to go. Out came pen and paper to 
start sketching out ideas 


design diary. 


27 















Coloud Headphones 



<Pac:lcaging> 

In keeping with the brand 
the Coloud headphone 
packaging takes on the 
logo outline 


there is nothing to remove. Coloud sells 
headphones with all the useful features you 
need and without the stuff you don’t. So, the 
obvious thing for Oakwood was to keep this in 
mind when designing coloud.com. 

“The goal: To make a simple, yet engaging 
site with all the useless stuff stripped off.” 

The two parties involved in a project initially 
spend a lot of time working together, but once 
the brief is passed over to the agency by the 
company, the creative relationship changes. 
Flodman explains how the process evolves. 

“As mentioned earlier, we enjoy a very close 
relationship with this client and often 
brainstorm together. The foundation of what 
was needed and the scope of the project was 
set together with some early concepts. 

“The first messy sketches of the product 
presentations were actually drawn up during a 
quick sit-down breakfast at a nearby cafe with 
Niklas Berg, creative director at Coloud/Zound 
Industries, this summer. We find that having 
small and relaxed work sessions, out of office, 
can really help the creative process and 
integration with the clients. The trick here is to 
combine this with a well-structured process for 
production and further development. 

“There was also a third-party involved in the 
process that was making all the 3D renders of 
the different models, colour SKUs, and 
headphone parts. In charge of this was the 3D 
artist Henrik Svensson. During the project all 
the parties sat down together several times, 
discussing new emerging ideas, challenges 
and how they could be solved. This was key 
for us to make small ideas - like the cord 
animation - doable within the scope.” 

Looking past the initial encounters and now 
working mainly from the office, the time came 


for Oakwood to start putting together concepts 
and ideas to kick off the actual design process. 
As Flodman explains, the first step is always the 
vision. This is then quickly followed by working 
on producing a site style that would best tell 
the Coloud story. 

“Most of the core insights came from the 
brand itself. Because the brand and products 
have a very clear vision, the same vision could 
be applied to the site. Together with the original 
concept of presenting the headphones in a 
‘scroll’ site fashion, we at Oakwood could draw 
up a basic structure and technical specification 
for the site. 

“The scroll site is today both used and 
abused in many ways, but is still a great way to 
merge a narrative into the product 
presentation, but without depriving the user of 
the interactive freedom. It’s not an intro or 
video but a way of presenting content in 
sequence to create a story that bridges the 
gap between content and the actual site. This 
gave us the tools to tell the Coloud products 
story in a engaging and entertaining way. 

“The scroll presentation also fits very well 
with the shape of headphones as a product. It 
enabled us to show larger imagery from the 
start, eliminating the extra step of enlarging 
every image the user finds interesting. 

“Early mock-ups were further developed and 
during this process most ideas where born. The 
good ones, the ones that are easily rooted 
within the work group, were also presented to 
the client. With Oakwood’s mix of creatives and 
technologists with different talents and 
expertise, it’s easy to get insights and 
perspectives by just discussing ideas. This made 
it possible for us to quickly create and develop 
mockups and prototypes for this project.” 


THE 

LAUNCH 

Every project lifecycle finally 
reaches the launch stage. It 
could be construed as one of 
the most vital and important 
elements of the process. A 
beautifully-crafted and 
engineered website can 
easily become something of 
a white elephant if not 
marketed at its target 
audience and beyond. 
Project manager Mia 
Kristenson explains how a 
well co-ordinated and 
executed site and product 
launch were critical. 

“The new line of 
headphones were launched 
globally in October this year, 
and therefore we had a set 
date to work against. Since 
the site is the digital flagship 
store it was important that 
the site launched at the 
same time as the worldwide 
announcement. 

“To spread the word 
about the site we sent out a 
press release to various 
magazines and blogs, but 
the most effort was put in to 
getting the site attention 
purely via word of mouth; 
getting people to talk about 
it. Already from the 
beginning the site got a lot 
of attention and organic 
referrals. People like the site 
and are eager to share both 
the site and the products 
within their social network. 

“Even though the site has 
only been live for a little over 
a month, it has already 
started to get awarded. For 
example, the site was 
recently awarded the ‘Site of 
the Day’ accolade on 
awwwards.com. 

We can see that the 
interest for the brand and 
the site is growing stronger, 
and we keep getting traffic 
from design sites talking 
about coloud.com as a great 
online experience.” 


© CQLQUD'HEAI 


Engineered to play> 

The Coloud logo is cleverly recreated 
using the headphone range in its many 
various colour guises 

<lVienu structure 

Defining the menu structure and detail 
before building is crucial to producing a 
navigation system that works 
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ENGINEERED TO PLAY 

Introducing the new Coloud Headphones. Engineered to bring you a dynamic 
sound experience, with all the useful features you need, and without the stuff you 
don’t. Coloud is always ready to play when you are. 

El Cilia 2k 
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The first messy sketches of the 
product presentations were actually 
drawn up during a quick sit-down breakfast at a 
nearby cafe with Niklas Berg, creative 
director at Coloud/Zound Industries 
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fuE Startup 
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GET INTO THE SPECIFICS HERE 
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MODELS OF CO LOUD 


FEATURES 

Q? Microphone & Remote ^ Tangle-Free System (O) 3-D Ergonomics 


STYLES 




GET INTO THE SPECIFICS HERE 


Longterm 

collaboration 

In essence, a project never truly ends for 
an agency. It’s rarely the case that an 
agency says goodbye to its client and 
they both go their separate ways. 
Aftercare is all part and parcel for many, 
as Oakwood project manager Mia 
Kristenson explains. 

“As mentioned, Oakwood has a proud 
long-term collaboration with Zound 
Industries and all their brands. We will 
continue to work alongside Coloud 
Headphones to further assure the high 
performance of the site. 

“At Oakwood we never see our projects 
as something short-term. Therefore we 
always offer our clients aftercare for the 
projects. This could be in terms of 
supporting the client with updates on the 
site, improvements and analyses of how 
the site is performing. How much we do 
depends a lot on what skillsets the client 
has in-house. Most of the time we work 
really close with our clients to constantly 
improve their online performance. 

“We will continue to work together 
with Zound Industries to constantly 
improve and optimise the site for it’s 
visitors, adding more products and 
evolving the brand experience.” 


“You have people exploring different 
directions in order to find the right one. But 
once the direction is set it’s important that 
everyone works for the same goal. That is why 
we feel that communication and integration 
within the work group and with the client was 
essential for the project outcome, and is 
essential for any project.” 

Pre-planning is a much under-valued and 
appreciated element of the build process. But, 
its only when the designers start to get 
involved in a project that it begins to reveal its 
true beauty. Flodman agrees that the design is 
crucial to site success, but any good design 
should always tell a story. 

“Graphic designer and art director Mia 
Nilsson was the lead designer for the Coloud 
site. She is a talented creative with a 
background from both print and digital design. 
For us the core quality in a designer should lie 
in the understanding of design and 
communication principles. Having an 
understanding for how brands can use design 
and storytelling as an emotional 
communication vessel is essential. 

“Mia led the design work and created the 
look and feel for the site, while some more 
detailed design work was passed back and 
forth within the group. You increase the 
chances of finding great design solutions 
when you have more than one perspective 
looking into the same problem. We had to face 


a lot of challenges, like creating the masking 
effects, right-hand navigation, and many other 
parts of the site. 

“The site combines brand experience with 
useful functionality, which put lots of pressure 
on both the design and the front-end, so its a 
good thing we have no assigned seating 
arrangements at the office. Everyone can just 
pick a spot anywhere in the studio space. This 
makes it easy for designers and developers to 
work closely together in groups. 

“Emil Sail was amazing during the project 
and put a lot of effort into the performance and 
finesse of the front end. The site is optimised to 
work on mobile and iPad, and it was a great 
challenge to make the scrolling experience the 
same on the iPad as on the desktop. The result 
was really successful, and when we presented 
the first version, even the client couldn’t stop 
scrolling on the iPad, getting lost in the fun and 
easy way to interact with the site. 

“I’m really impressed to see what can 
happen when you nurture a creative and 
solution-oriented attitude towards both design 
and development.” 


<Closecl circuit souncl> 

Scrolling down the page reveals a 
new colour and details of the 
current product 

<TliuKnock> 

Colour palettes instantly allow the 
viewer to see how the colour 
combinations work 

<TliePop> 

At the end of each product page is a 
related product to keep user 
interest. A rollover effect is used to 
emphasise the product and grab the 
user’s attention 


The site is optimised to work on mobile 
and iPad, and it was a great challenge 
to make the scrolling experience the 
same on the iPad as on the desktop 
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teehan+lax I 

defining experience | 

Teehan ^ + k 
-i- Lax 

A happy 

accident 

We get the low-down on Teehan+Lax, a Canadian 
agency that worked hard to get their reputation, 
and whose primary motivation is quality 

who Teehan+Lax wliat Digital strategists delivering great user experiences 

where 109 Atlantic Ave, Suite 202, Toronto, ON M6K1X4, Canada web www.teehanlax.com 


SSSSSSSSSSSSSS he Teehan+Lax story starts 

•••••••••••••• 

over a decade ago, in the 
::::::: ::::: summer of 2002. Geoff Teehan 

and Jon Lax were both working 
for the same agency, Modem 
S””” Media in Toronto. Geoff Teehan 

;;;;;;; was the associate creative 

••••I:::: director and Jon Lax had been 

the creative director. 

It was here that fate decided to 
deal its hand. Modem Media 
decided to close its office in the 
summer of 2002, leaving both Teehan and Lax out of 
work and unemployed. 

With no money, no jobs, and no future, Teehan and 
Lax stayed in contact and had several discussions 
about trying to go somewhere together, maybe as a 
team. While discussing future possibilities, jobs 
needed to be found and interviews were a recurring 
theme throughout the summer. 

Still being friends meant that after either Teehan or 
Lax attended an interview, they would reconvene at 


Geoff’s back deck to debrief. Each time this happened 
the discussion followed a very familiar path. Lax tells 
us the discussions went very much along the lines of 
the following: 

“So how was it?” 

“F**king awful, <insert agency name> have no idea 
what they are doing. How about you?” 

“Same.” 

“We could do it better.” 

And Teehan+Lax was born. 

Well, the concept of a new agency was born and 
both Teehan and Lax started putting the building 
blocks in place. The first steps were to call a host of 
clients who had suffered the same fate as Teehan and 
Lax when the agency closed it doors. A simple 
message to previous Modem Media clients giving the 
lowdown that Teehan and Lax were considering 
branching out on their own received a universal 
response: ‘if you do it, well give you work’. Encouraged 
by the reaction. Lax decided to add to its prospective 
portfolio of clients by giving his old bossGM O’Connell 
a call. He followed suit with the reply “well give you 
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Teehan+Lax timeline 

Established 2002 

Founders Geoff Teehan, Jon Lax 


Won its first large-scale US 
project with the redesign of 

Johnhancockfunds.com, 

beating much larger 
US-based agencies. 





Hu 

* 



Moved into 8,500 square foot 
office in Toronto. Create TL Labs, 
which goes on to produce a run of 
digital experiments like ASCII 
Street View. 


Released the first version of the 
iPhone PSD. The various 
iterations of the iOS PSD (iPad 
and iPhone) have been 
downloaded over 1 million times. 


Begin working with 
Obvious Corp on a super¬ 
secret project called 
State, which ultimately 
becomes medium.com. 



work,” and a collective of clients were there ready and 
waiting from day one. 

Cofounder Lax tells us how even from the start 
Teehan+Lax was only meant to be a temporary thing. 
“We opened up with the idea that we would work some 
of these opportunities while trying to find ‘real jobs’. 
Teehan+Lax was really a temporary thing. But after two 
years we had a few employees and Geoff and I decided 
that this was permanent. The whole thing was a bit of a 
happy accident.” 

With the agency foundations in place, the logical 
progression was to debate a name. A decade ago, 
abstract names were a popular, if slightly pretentious, 
choice for creatives. A path that Teehan and Lax 
visited, but one that never felt right. The next choice 
was to, keep it simple and obvious - the only issue was 
who was to get top billing, as Lax explains. “When we 
were trying to name the company we had a list of 
abstract names. At the time, ‘-iant’ names were really 


popular. Sapient, Alliant, Navigant, etc. We played with 
a lot of names like that but nothing ever felt right. 
2002 was right in the darkest days of the dotbust and 
names that were abstract felt really fake to us, like we 
were hiding something. 

“Geoff and I envisioned a company where we 
would work really closely with clients. We were selling 
us. At the time it was unusual for Digital Agencies to 
name themselves after the principals - that was more 
of an old ad agency or law firm thing. 

“So naming the company Teehan+Lax just made 
sense. It aligned to the kind of company we wanted to 
build and it allowed us to put our personalities in to 
the identity. 

“We played with the order of the names... 
Teehan+Lax, Lax+Teehan. We both agreed Geoff’s last 
name just sounded better first. 

“Obviously the URL wasn’t taken, but when we 
were looking at possible names we would come up 


with a name and look to see if it was available. I think 
that is common for naming.” 

Teehan and Lax had a head start when they got 
together, with a host of clients already in the bag. But, 
all good agencies need to keep clients coming back 
or actively engage newcomers. Lax explains, that for 
continued success you need to ‘do good work’. 

“Your job is to develop reputation. That is how you 
get clients. If you have an hour to spend, do something 
that will get you a reputation in the field you want to 
be known in. 

“I’ve never seen outbound selling work in this 
industry. Anything of quality has come because our 
reputation attracted it. 

“I think people imagine that this business has some 
magic to it, but the best new business tool is your 
work. Do good work and you get good work. 

“I’ve seen other agencies have some success with 
relationship selling, so they attend every conference. 
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INI We would look at every client sceptically 
and say why do we want to work on this? § § 


agency’s way. As Lax reveals, a bad client can have 
disastrous consequences. “We’ve always been 
selective about who we work with. A bad client can 
ruin a company - there is such a thing as a bad dollar. 
Now, if your primary motivation for being in business 
is profit than your only criteria for work is budget. But 
our primary motivation is quality. 

“Even when we were starting we would look at 
every potential client sceptically and say, why do we 
want to work on this? Is this interesting to us? 

“All the partners here work on the clients we take 
on; so one of our criteria when looking at a new 
piece of business is, are we interested in it? We eat 
our own dog food. 

“We have done a few jobs just for the pay cheque, 
but when we do that, we do it knowingly. We make a 
conscious decision to take it on for financial reasons 
and we tell the team, ‘hey, this is why we are doing this 
job’. It happens very rarely. 

“As we’ve grown larger, we have a minimum level of 
engagement that we look for. Right now, we look for 
clients who will commit to 12 months and a minimum 
of $750,000 over that 12 months. We need clients like 
this because of our scale. There are certain economics 
to our business at this point. Occasionally, if a really 
great opportunity comes in, we will make an exception 


sit on every industry board, take potential clients out 
for dinner and drinks. That style was never us. We 
would rather focus on making something.” 

Attracting new clients is one key to success, and 
the Teehan+Lax website goes a long way as the 
springboard for more work. Lax is proud of the 
company site but thinks they don’t spend enough 
time maintaining it. “Our site gets over 1 million unique 
visitors a year. Which, I think has to be one of the most 
visited agency sites in the world. We use our site to 
share with the design community. We are really well 
known for our iOS PSDs, but our Labs group gains a 
lot of traffic and our blog posts contribute as well. 

“Creating meaningful resources and content is 
essential for us. Like most agencies, about every two 
years we try to redesign our site and it takes a lot of 
work. We are due to do it again in 2013. 

“We don’t spend enough time maintaining our site. 
It is a real source of personal frustration. One thing I 
am considering is hiring a full-time team to do nothing 
but design and create for our company site, Twitter, 
Linkedln etc. I think that it may require full time 
resources to do it properly.” 

As already mentioned clients are key, but being 
selective with whom you work with can be just as 
productive as taking every project that comes an 
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but generally we look for clients of a certain scale. The 
problems that are interesting to us right now 
(multiscreen, complex) are bigger challenges and 
reguire corresponding budgets and commitments. 

“We won’t do pharmaceuticals or government. 
Those two categories just reguire too much 
specialised knowledge and patience to deal with.” 

Teehan+Lax has grown into a major creative force 
in the decade it has been in business. Along the way it 
has embraced a plethora of projects, and we asked, ‘Is 
there a project that typically defines the Teehan+Lax 
ethos?’ Lax suggested there is no definitive answer. 
“Wow, typically the one we are working on currently is 



always defining our ethos. The best projects for us 
are the ones that get used by consumers the most, 
so by that definition, the Beatport (www.beatport. 
com) site is up there, as is the work we did on the 
apps for Readability. 

“There is one project we did for Bell here in Canada 
where you take a picture of a billboard and send it to 
this email address, and we send you a report of how 
your phone ‘stacks up’ against other phones Bell is 
currently offering. I love that interaction. It’s so simple 
and helpful for someone trying to decide on a new 
phone, and the best part is that the tech is super 
simple. Most people think there is something 



encoded in the billboard you are taking a picture of 
but all we do is read the EXIF data on the picture. You 
could a take a picture of anything and as long as you 
send it to that address, it gets parsed.” 

While no project is the archetypal stereotype of a 
Teehan+Lax work, large-scale projects do take a more 
conventional path. Lax offers a brief insight into the 
timescale and process involved in bringing a project 
to fruition. “Large-scale projects are typically taking 
about six months to complete. In the past year or two, 
we’ve moved away from waterfall based methods 
where there are distinct phases of ‘design, 
development, testing’, to a more agile method where 
those activities are occurring daily. 

“In terms of resources, a large-scale project would 
have a team of two or three designers, two or three 
developers, a project manager, a Partner, an IA; and 
that team would get help from our planning group, 
which would include content strategy, business 
strategy - maybe some analytics and measurement.” 

Every project needs tools, and while Adobe is the 
popular choice, its not the only choice as Lax reveals. 
“We use Adobe for design. We rely on Photoshop, 
Illustrator and InDesign to varying degrees. On the 
development sides, we use a variety of IDEs - Coda, 
Sublime, XCode. We are increasingly relying on 
GitHub. We use Basecamp for project wrangling. It’s a 
bit of a mixed bag, right tool for the job. In 2013 I want 
to standardise this a bit. It’s become a little chaotic.” 

Tools are always accompanied by technologies, 
and the primary candidates are currently HTML5, 
CSS3 and jQuery. Lax believes these are important, 
but there are other ecosystems that may not grab the 
headlines but are egually essential. “I think these 
technologies are incredibly important and shifting 
how we work. When we began in 2002 we started by 
only delivering design to clients. Our deliverable was 
PSDs and a build guide/style guide. We did this 
because we didn’t want to build technology, and at 
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if Amazon Web Services has 
without a doubt profoundly 
changed how we work 


that time everything was still being built on top of 
massive enterprise CMSs and application servers. 

“Front-end technologies, frameworks, and APIs 
have all changed how we work. We build a lot more 
technology then we used to, including spinning up 
AWS servers for clients and building APIs. We still have 
no interest in building enterprise technology like .NET 
or Java servers, but we are aggressively doing more 
building than at any time in our history.” 

As Lax mentioned, new technologies are changing 
the way designers and developers work. We enguired 
about what is it that is making the Teehan+Lax 
workflow more productive and exciting. “In general 
we look for tools that let us get to working software 
guickly. We love Twitter Bootstrap. Mark Otto is a 


good friend of ours and that is a fantastic tool for 
guickly prototyping. We’ve also been using Angular.js 
lately, with some very good results. 

“GitHub is becoming popular in our workflow but 
we are still in the process of perfecting how to use it 
for total project management. 

“Amazon Web Services has without a doubt 
profoundly changed how we work. We would never 
want to manage servers or build our own servers, but 
AWS changes that.” 

Responsive design and mobile are two areas that 
are very much at the cutting-edge of digital design. 
However, designing and developing for different 
devices offers myriad different practices to reach a 
common goal. Lax suggests that responsive design is 



industry 

insight Jon Lax, cofounder 



« Your job is to develop 
reputation. That is how 
you get clients. If you have 
an hour to spend, do 
something that will get 
you a reputation in the 
field you want to be 
known in 99 
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currently limited in its approach. “I think that 
responsive designs work for a certain type of content 
- mainly editorial content. But I favour custom most of 
the time. I believe you need to think about the context 
that a user will call up your site on mobile, and design 
for those use cases. I don’t believe that your mobile 
web should just be a miniature version of your 
website. I think that if you are building a website today 
that doesn’t have mobile or tablet views, then your 
site is shipping broken.” 


Design processes and practices bring a site to the 
web, but not the masses. Promotion is critical to 
getting visitors to a site. Social media is one popular 
choice, but Lax doesn’t give it too much credence. “I 
don’t spend a lot of time thinking about social in terms 
of awareness generation. Obviously it’s important and 
those are great tools, but I try to spend more time 
thinking about how to create something that can be 
useable and useful to customers. I think that if you can 
do that, it finds its own audience. 


“It’s not that I don’t believe in the awareness part of 
the funnel, we just tend to focus on other things.” 

Looking beyond processes, practices, and 
promotion, there is always a human element to every 
agency. Lax explains the agency’s values, and gives 
some sound advice for anyone wanting to take those 
first tentative steps toward getting a job in the industry. 
“A few years ago I went through an exercise to write 
down our values. I used to think corporate values 
were bullsh*t and a bunch of corporate speak, but I 


Medium 

www.medium.com 

This is a project on which Teehan+Lax is working 
closely with The Obvious Corporation. We enjoy the 
challenges of building digital products like this - 
products that people will use and have more 
durability than campaigns. For this project we have a 
team that is a hundred per cent dedicated, which 
allows us to focus on the product without distraction. 
Our team is splitting their time between San Francisco 
and Toronto while working on Medium. 



Dear rappers trying 
to peddle your CD in 
front of Walgreens 


First and foremost, allow me to 
commend you on your entrepreneurial 
spirit and your initiative to get your 
album out in the world. I appreciate 
that you have created art and are 
exploring distribution models that 
don’t rely on major record labels, 
because you and I both know that they 
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This time around, we're giving some love 
to the Android Kaos out them. When it 
comes to designing experiences in a 
multi-screen world, we don't deenminate. 

As always, we’ve made this for ourselves 
and share It freely. The design community 
is amazing and this is just one way we re 
giving back. If you like this, please give us 
a Irttfe shout-oul in the form of a tweet! 



saw that if you did it right it has the potential to be 
incredibly powerful. 

“So we now talk about our core value, which is 
‘Make Epic Sh*t’. That is what we love to do. We like 
making things that people use. We have some 
gualities that we believe make up who we are. When 
we interview we look for people who have similar 
values. They say things in the interview process that 
let us know if we are on the same page. 

“So for prospective employees or someone 
stepping into the industry, the advice I give is... what 
do you value? What kind of work are you looking to 
do? When you go to a company try to determine if 
you value the same things. For example, some 
designers value storytelling. They like crafting little 
movies and narratives. If this is you, don’t go to a 
company that values building technology for 
intranets. You and they will be miserable.” 

Finally, the present is looking exceptionally bright 
for Teehan+Lax, but success isn’t built by only looking 
at the now. The agency has one eye on the future, but 
Lax admits that he doesn’t like growth for growth’s 


sake. “I’m really excited about the future, maybe more 
so than in the past few years. We are really focussing 
on product innovation for clients. Thanks to our Labs 
group we’ve instilled a ‘maker’ or ‘hacker’ culture here, 
and we are aggressively pursuing that. It just feels 
right to us. 

“Growth or expansion is a touchy issue for us. I only 
want to grow or expand if the work we want to do 
demands it. I don’t like growth for growth’s sake. 

“We’ve been spending increasing time on the West 
Coast in San Francisco and are currently debating 
opening an office there. 

“In terms of exciting projects, definitely our 
collaboration with The Obvious Corporation on 
Medium is very exciting. Our partnership with 
Readability designing and building their mobile apps 
is amazing. We also have some things coming out 
with Google that I think will be interesting. 

“We have a secret project that we are working on 
that I really hope we can unveil in the new year. I can’t 
say much about it other than it involves skateboarding. 
We’re very excited about it.” 


WEB . www.teehanlax.com 

FOUNDERS . GeoffTeehan 

.and Jon Lax 

YEAR FOUNDED . 2002 

CURRENT EMPLOYEES . 43 

LOCATION . Toronto 


SERVICES 


> Digital product design 

> Mobile design 

> Software UI design 

> User experience strategy 
and planning 
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ESIGNING FOR SMARTPHONES, TABLETS AND DESKTOP 
HAS NEVER BEEN MORE IMPORTANT. DISCOVER THE 
TOOLS AND TECHNIQUES NECESSARY TO BUILD THE 
PERFECT ALL-SCREEN SOLUTION 
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THE ART OF 
RESPONSIVE 
DESIGN 


o you remember the days when computer 
monitors all came in one simple shape and 
size? They weighed a tonne but when you built 
a website you knew exactly how it was going 

_ to look on all of them. Those were simpler 

times for web designers, but technology has since 
played a cruel series of tricks on us. These days, with 
the advent of smartphones, tablets and gaming 
consoles with internet browsers, your website goes 
out into the world with far more trepidation about 
where and how it will be viewed. The one-size-fits-all 
website is fast becoming an extinct beast, a thing of 
the past, replaced by the magic of one-site-adapts-to- 
all responsive web design (RWD). 

Until recently, many in the industry considered 
RWD nothing more than a fad. Ethan Marcotte’s now 
legendary article, coining the phrase responsive web 
design and presenting a new approach to website 
construction, seemed to some like a nice idea that 
would never catch on. However, seventeen months 
later RWD is swiftly becoming the standard for 
almost all web design. In fact, both Google and Bing 
now recommend that all sites are built responsively. 
That’s quite a turnaround for a fad, don’t you think? 

But is it really such a surprise? User experience is 
the foremost consideration of any web designer. The 
best looking site in the world is without any merit at 
all if the user can’t navigate it on a screen no bigger 
than their palm. Clients want sites that can be viewed 
on a computer and an iPhone, and you can only 
pinch, swipe, and expand for so long before your 
hand starts to lose all feeling. Necessity, as always, is 
the mother of invention and the variety of web- 
capable devices on the market has led designers to 
the obvious choice - websites that adapt to their 
surroundings and provide the maximum usability on 
any screen. Why build individual sites for multiple 
formats when you can build one that works on all of 
them? This is the essence of responsive web design. 











'Vi Ifflfi" 

° @oO ■ 

THE ART OF RESPONSIVE DESIGN f° 


i£i 


gQjS 


fS^,V° @ oO ° |i 

°\]> i«- s 

THE CURRENT STATE OF WEB DESIGN 

Adaptive web design, the creation of separate sites 
tailored for particular portals, allowed web designers to 
begin addressing the problem of migrating their sites to 
devices other than the PC screen. Those viewing a 
website on their iPhone or Android were redirected to a 
custom-built, often much simpler, version of the site. It 
made sense, and for more complex sites, especially 
eCommerce, it still does. Though this option offers full 
control over how your site looks on any given browser, it 
has drawbacks in the workload required to maintain and 
update multiple sites. In addition, there’s always a new 
device just around the corner. Do you want to be 
building new versions of your site forever? 

Responsive web design offers a solution by allowing 
the creation of a single site built to respond to its 
environment, essentially taking a look at its 
surroundings and readjusting its elements. Pictures 
resize themselves to fit within the screen. Columns that 
sit side-by-side on larger screens stack themselves one, 
or two, above the other. In this way, content remains at 
an agreeable resolution without the need for several 
thousand-finger gestures to look closely at the area that 
interests you. 

Three key elements must be implemented to achieve 
this goal: A fluid grid, fluid images, and media queries. 

A fluid grid is a layout that either deals with relative 
sizes rather than absolute ones, or draws from a series 
of absolute values custom designed for varying size 
displays. It can view the space it inhabits in percentages 
rather than set pixels. So while a widescreen laptop will 
have a screen space of 1,500px and a portrait iPhone 
only 320px, to the fluid layout both are merely 100% and 
its component elements divisions of that percentage. 

Likewise, fluid images utilise percentage max-widths 
to resize themselves according to the space in which 
they are contained. This can be a single image or 
sometimes several versions of the same image, called at 
varying resolutions to reduce loading time when a 
smaller size is required. 

However, media queries are the real magic ingredient 
of the responsive process. The CSS3 specification has 
extended the old media attribute, commonly used to 
separate print layouts from screen layouts: It used to 
look a little something like this: 


001<link rel=”stylesheet” type=”text/css” 
href=”style.css” 

002 media=”screen” /> 

003<link rel=”stylesheet” type=”text/css” 
href=”print.css” 

004 media=”print” /> 


Now designers are able to detect and implement CSS 
changes according to the specifications of the device 
viewing the site: 


001<link rel=”stylesheet” type=”text/css” 
002 media=”screen and (max-device-width: 
480px)” 

003 href=”device.css” /> 


In addition, it is now possible to include queries directly 
in the CSS itself: 


001@media screen and (max-device-width: 480px) 

002 .column { 

003 float: none; 

004 } 

005} 


Using these queries at various break points, each 
corresponding to a particular device’s specifications, the 
designer has almost limitless control over when and 
how the site reconstructs itself. 

With a series of media queries determining the 
screen area in which your site exists and adjusting the 
content accordingly, it can be prepared for anything. 
Think of it as a better relative of the conditional 
comments once overused to deal with Internet 
Explorer’s shortcomings. 

MAKE A SITE RESPONSIVE 

Turning an existing site with a fixed-width layout into a 
responsive site can be a relatively simple process, 
depending on the complexity of the site itself. In some 
instances, it may be easier to rebuild the site from the 
ground up, using a pre-existing framework such as 
Bootstrap or Skeleton (more on those later). The 
following example, however, will focus on a simpler 
layout - a classic blog with a logo, banner and three 
columns of content. All these elements have fixed 
widths and we’ll use responsive techniques to make 
them viewable in a portrait mobile browser. 

As you can see, our page looks fine on the PC screen, 
but when it is viewed in an Android browser, both the 
text and images are way too small to be of any actual 
use without some considerable finger work to increase 
the zoom. What we need to is make sure this page 
fully-utilises the myriad different dimensions of a mobile 
device’s screen. 

The first thing to consider is how you want it to look in 
a mobile browser. The key is to make our elements as 
clear and viewable as possible. For example, instead of 
keeping our three columns side-by-side, it would make 
more sense to have them stacked on top of each other. 

In this way, the images remain a good size and the text is 
legible without zooming. 

To begin, we need to communicate with the target 
browser by placing our viewport meta tag in the <head> 
of our HTML page. This tells the mobile browser not to 
scale our site: 
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■ Ineffective use of screen space on a mobile device. 



“TURNING A SITE WITH 
A FIXED-WIDTH LAYOUT 
INTO A RESPONSIVE 
SITE CANOE A SIMPLE 
PROCESS” 


001 <meta name=”viewport” 
content=”width=device-width, initial-scale=l, 
maximum-scale=l” /> 


Now we can begin modifying our CSS. We’ll add one of 
those magic media queries into the existing stylesheet 
and set a break point for the mobile device width. 


001@media only screen and (max-width: 
380px) { 

002 

003} 


Any CSS values we place between those brackets will be 
called only when the device width is 380px or less. We 
need the browser to access the values intended for it 
alone. So, let’s get rid of the 960px width that our 
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ONE COLUMN 


TWO COLUMNS 


THREE COLUMNS 





Lorem ipsum dolor sit a met, doji se ctetur 
adipisdng elit. Ptaesent euismod ulfricas ante, 
aclacreet nulla vestibulum adipisdng. Nam 
quis justo in augue auctor imperdiet. Curabitur 
aliquet ord sit a met est posuere censectetur. 

©2012 Its a Boat! 


Lorem ipsum dolor sit amet, Donsectetur 
adipisdng elit. Ptaesent euismod ulirices ante, 
aclacreet nulla vestibulum adipisdng. Nam 
quis justo in augue aucter imperdiet. Curabitur 
aliquetord sit amet est posuere cense ctetur. 


Lorem ipsum dolor sit amet, ccnsEdatur 
adipisdng elit. Ptaesent euismod ultrices ante, 
aclaoreet nulla vestibulum adipisdng. Nam 
quis justo in augue audot imperdiet. Curabitur 
a liquet erd sit amet est posuere consEdetuf. 


■ Our layout in a PC browser 

* #container is set to and change it to 100%. The container 
will now fill the width of the screen and no more. Repeat 
this process for every other nested element. We still 
want to keep a small margin between our content and 
the edge of the screen, so well give the #banner, #intro 
and #footer elements widths of 90%, with margins 
either side of 5%. But well also give the .column 
elements the same measurements, because we want 
them to each stretch to the width of the screen rather 
than occupy a third of the container. Now our columns 
will automatically stack, increasing their legibility. 

Although we have the option to set particular values 
to the text, enlarging or reducing as required, in this 
case keeping the values the same works. The title looks 
good full size and the body text, in keeping its own full 
size, makes it clear and readable (don’t worry, we’ll be 
covering responsive text in the next section). However, 
we’ll make sure that the #logo and #nav elements are 
given the necessary width and alignment values 
required to keep them stacked and centred. The last 
piece of the puzzle is handling the images. At the 


moment they are the only things that extend beyond 
the limits of the screen because they have been given 
set widths in the markup. We need to remove those 
widths and add this declaration into our CSS, outside of 
the media query: 


|001img { 


1002 max-width:100%; 


003} 


Now the images will resize themselves to fill the width of 
the column in which they sit. Adding further media 
queries will perform the same function for a variety of 
other devices. Our site is now responsive. 

FAIL TO PLAN, PLAN TO FAIL 

Anyone who has tried to design a site without knowing 
exactly what content is going in it will already 
understand how important the planning stage is. For a 
fluid layout, good planning is essential because there 


Rik Barwick 

MANAGING 
DIRECTOR OF 
CREATIV TEA 
DESIGN STUDII 

creativitea.co.uk 

Responsive design is becoming a 
fundamental part of a website 
designer’s repertoire, and is not just a trend. 
New devices are getting released at an 
alarming rate, and it’s up to us as designers 
to cater for these different user 
experiences. We must also be sympathetic 
to less-experienced surfers and ensure our 
designs help improve the user experience 
and not confuse it. As a seasoned online 
shopper I am getting increasingly frustrated 
with the lack of mobile support on various 
eCommerce sites, and feel the future of 
eCommerce lies in mobile. 
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are so many variables to consider. Although we are 
embracing techniques that will be able to handle 
unpredictable viewports, it is still advisable to prepare 
for as many eventualities as possible. This means no 
longer thinking of your website as a set layout but as a 
series of modules, able to disengage from each other 
and rearrange themselves without losing the core 
structure and visual language of the site. 

Content hierarchy is an important consideration. 
Since most responsively built websites will become a 
single column layout with a lot of downward scrolling, 
the designer must decide which content is most 
important for the initial opening window, working down 
to the bottom of the column. Can some content be 
omitted from the mobile layout altogether? 

In addition, navigation can present its own problems. 
How many pages need to be accessed from the 
navigation? If there is a complex series of navigation 
links and sub-links that work perfectly well in a 
fullscreen navigation bar, is that same arrangement a 
viable option on the mobile browser, or should 
navigation switch to the device’s native selection tool? 

With all these questions unanswered it’s critical that 
the designer take delivery of as much of the site’s 
content as possible at the design stage. The inclusion of 
Lorem Ipsum nonsense was fine in a single layout 
Photoshop comp, but it adds no value for a designer 
devising a content hierarchy that will serve multiple 
access points efficiently. 

There are many emerging schools of thought on 
approaching the planning and design of a responsive 
site. Some web designers are abandoning Photoshop 
produced comps altogether and designing directly in 
the browser, utilising the developer tools and browser 
resizing to view their design as it adapts to different 
widths. They encourage the client to view the project’s 
progress in the same way. However, as excellent as 
Chrome and Firefox’s developer tools are, there are still 
limitations at such an early stage of a project, and some 
designers balk at the idea of working creatively with a 
browser’s developer tools. In the end it comes down to 
personal choice. 

There also seems to be a growing consensus that 
designing the mobile layout first is the logical choice, as 
it allows for a clearer vision of the content hierarchy 
which can then be applied to upward device layouts. 
This also makes sense since it won’t be long before 
more people are viewing sites on mobile browsers than 
computer or laptop screens. 

The jury is still out on the best way to plan and start a 
responsive website. Whichever way you decide to 
approach your design, you should at least be designing 
for the two ends of the spectrum - the portrait mobile 
device and the wide PC screen. With these two 
‘bookends’ realised it is easier to predict everything in 
between. Producing a quick wireframe for the two 
extreme layouts can be valuable in setting the tone and 
pattern for all subsequent layouts. 
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I Our layout in a PC browser 


I The mobile layout 


START BUILDING A 
RESPONSIVE SITE 

Once we have our basic layout for both mobile and PC, 
we can begin translating this into fully-responsive HTML 
and CSS. There are a few ways in which to proceed from 
this point. As we have seen, it is plausible to build a base 
site in pixel values and create media queries to enable 
the CSS to act responsively in different browsers. 
However, this time around we are going to build around 
a fluid grid system. 

There is a wealth of Boilerplate grid layouts available 
to web designers, the best of which will be covered later 
in this article. Once again, opinion is divided on whether 
designers should construct their own fluid grids or use 
the pre-built options. 

In reality, it comes down to the demands of the 
project, so for this site we are going to use the Skeleton 
grid. Skeleton is a lightweight, fluid, 960 grid system in 
16 columns. While it is not ideal for every project, it suits 
our simple 960 layout. So let’s grab the package from 
www.getskeleton.com and get to work. 

Skeleton comes with three distinct CSS stylesheets, 
but what interests us is the skeleton.css, which gives us 
the basis for our fluid grid. With 16 columns over which 
to lay our modules, and pre-arranged media queries, it 
offers all the tools we need to make our site responsive. 
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RESPONSIVE DESIGN SHOWCASE 


Here are some examples of the 
best that RWD has to offer. 
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THE BOSTON GLOBE 

www.bostonglobe.com 

Great example of responsive 
design for news features with 
a very well thought out 
content hierarchy. 
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Place the skeleton.css into your CSS folder, call it in the 
<head> along with the style.css, and we’re good to go. 

STRUCTURE 

We’ll begin building our simple layout, putting in place 
the div modules we’ve identified from our wireframe. 
Any base CSS styling can go into our style.css sheet. 
Although Skeleton already has the container style 
covered, we’ll add a specific class from the skeleton.css 
to each of our other ids, based on how many columns 
we wish each module to occupy. For example, we want 
the header to span the full 960 width, so we mark it: 

001<div id=”header” class=”sixteen 
columns”x/div> 

The same applies to our navigation bar, but the content 
and sidebar divs must sit side by side; at least in our PC 
layout. So, we divide between the 16 columns, according 
to how wide we want each to be: 

001<div id=”content” class=”eleven 
columns”x/div> 

002<div id=”sidebar” class=”five 
columns”x/div> 

Feel free to go into skeleton.css and change margin and 
column widths to suit your needs. For example, 
trimming 5px from the margin for each column at the 
base 960 grid level allows expansion of the column 
widths by the same amount. You can play around with 
the values until you have the layout you require. 

Our basic layout is ready for viewing in the browser. 
Reduce the size of your browser and you’ll see that it 
already adapts to the reducing screen size, but there are 
still some details to iron out, specifically the logo image, 
text, and navigation. 

TYPOGRAPHY 

We need to decide how our text will be handled as it 
moves between different screen sizes. Common 
practice has been to declare the base font size in the 
body tag using a pixel value. 

“COMMON PRACTICE 
HAS BEEN TO DECLARE 
THE BASE FONT SIZE IN 
THE BODY TAG USING A 
PIXEL VALUE” 


001body { 

002 font-family: Arial, Helvetica, sans-serif; 
003 font-size: 16px; 

004 color: #000; 

005} 

006 

007hl { 

008 font-size: 42px; 

009} 

However, for the purposes of responsive text we will 
shift to a relative value. If we declare a base value of 
100%, which most browsers will interpret as 16px, we 
can then adjust all our text relative to this 100% using 
the em value. 

001 body { 

002 font-family: Arial, Helvetica, sans-serif; 
003 font-size: 100%; 

004 color: #000; 

005} 


006 

007hl { 

008 font-size: 2.625em /* 42px / 16px */ 

009} 

Assuming our 100% font size is 16px, we can calculate 
the em value of all our text using this formula: 

00lTarget / Context = Result 
002The target value is 42px and the context 
value is the <body> value of 100%, which 
equates to 16px. 

003 

00442 / 16 = 2.625 

Hence our hi value of 2.625em, with the calculation 
commented after the value as good practice. 

With our 100% base value declared, we can start 
entering relative values into media queries to make 




RESPONSIVE 

FRAMEWORKS 

A collection of tools that 
help you to create the 
perfect responsive layout 
and design 

Throughout the feature we have focused on 
creating a site that adapts itself to either end of 
the spectrum, but what about everything in between? 
So far, it’s been about a simple layout meeting the two 
extremes of screen width. The Skeleton framework 
has given the fluidity needed to bring a site to other 
widths, and dedicated use of media queries can cover 
all the bases and make sites as future-proof as possible. 
Let’s look at some other tools that can help you 
perfect that responsive site. 

Designers tend to disagree about how frequently 
you should use the range of available frameworks and 
tools that have emerged to alleviate some of the more 
tedious jobs involved in responsive web design. Some 
maintain that using prefabricated frameworks stifles 
creativity, while others see them as a time-saving 
measure that allows them to get on with the business 
of building websites. Whatever your view, there’s no 
doubt that a treasure trove of invaluable tools are 
available for the designer looking to step into the 
responsive world. Here are some of the best. 


I Taking the pain out of grid building 


GRIDPAK 


gridpak.com 

A number of fluid grid builders have appeared 
7 online over the last year, but for those wanting a 
quick and easy way to build a fluid grid for their 
responsive website, Gridpak offers a whole lot more 
than the rest. It has a user-friendly interface that 
allows you to build a grid with custom columns, 
gutters, and padding by changing the values in the 
right-hand boxes. Then, by using the slider tool, you 
can set break points at the widths of your choice, 
after which you can download an impressive 
package of files. 

Gridpak provides you with CSS, SCSS, LESS, 
JavaScript, PNG files, and an extremely useful demo 
folder to help you get to grips with what you have 
to do next. Of course, this is just the start, and there 
is still a lot of work to get the grid working for you; 
but it remains a useful, time-saving tool that will get 
you moving on the right track. 
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■ But hang on, that logo is too big and the 
navigation is in serious need of work 



Bootstrap 

Slrak. •nlmlrrt’. jind pnw^rinl front-nm! framework InHnstar and 
ess^r wtb ftevefop-me^L 



■ Proof that Twitter can produce more than 140-character rants 

BOOTSTRAP 


twitter.github.com/bootstrap 

Where Skeleton provides a lightweight grid system 
to get you started, Bootstrap provides the whole 
package. In addition to a 12 column, fluid, 960 grid, 
you get a full list of media queries, fluid navigation, 
buttons, tables, progress bars and forms. And if this 
isn’t enough you will also receive a host of 
JavaScript plug-ins for responsive drop-down 
menus, a carousel and more. All of Bootstrap’s Ul 
elements are designed to be highly customisable, 
making it an ideal start for most website projects. 

Such a complete collection of tools and 
elements may be a bit daunting to the person 
starting out in responsive design. However, you 
have the option to pick and choose the elements 
you download. Once you start to pick it apart, 
Bootstrap can make building your responsive 
website a much smoother experience. One of the 
best Boilerplates currently available. 



■ Responsive design for WordPress 


REVERIE 

themefortress.com/reverie 

WordPress has been quick to embrace responsive 
layouts as evidenced by the number of fluid 
themes available on sites like Themeforest. 

However, for those looking to develop their own 
responsive WordPress sites, Reverie offers a blank 
HTML5 canvas on which to build. Based on Zurb’s 
Foundation, Reverie uses Foundation’s fluid grid 
and media queries to form an effective Boilerplate 
for WordPress theme building. Among the features 
are widget areas, a sidebar, footer and two custom 
menus, breadcrumbs and support for Google 
Fonts. Reverie is clean and well-coded, allowing for 
easy customisation. Several custom page templates 
are provided and Reverie has been optimised for 
SEO. There’s support for BuddyPress, though some 
have complained that this has bloated the package. 

Those looking for a theme builder with 
drag-and-drop features should look elsewhere. 





■ Looking at responsive design from the bottom up 


STUFF AND NONSENSE 

stuffandnonsense.co.uk/projects/320andup 

While most Boilerplates tend to see how the big 
screen can scale down to the little one, Andy 
Clarke’s 320 and Up takes the mobile-first 
approach as its starting point. 320 and Up comes 
with five CSS3 Media Query increments: 480,600, 
768,992 and 1,382px; and is designed for LESS, 
with separation of the design atmosphere from the 
design layout. However, those unfamiliar with LESS 
have the option to employ CSS. 

Designed to integrate well with Bootstrap, 320 
and Up draws from the best of other Boilerplates, 
and this is its strength. 320 comes with both 
Modernizr and Selectivizr scripts for elegant 
handling of older browsers, but like Bootstrap itself, 
320 can seem intimidating if it’s your first venture 
into responsive Boilerplates. Stick with it. Mobile-first 
is an increasingly popular approach, and it could be 
that all Boilerplates will eventually look like this. 






































certain our text never looks too big for the area it 
occupies. Let’s add some media queries to our style.css 
to target additional device widths. We want to address 
text at the mobile level. We can place in a reduced 
percentage for the body font to target all text: 

001@media only screen and (min-width : 320px) 
and (max-width : 480px) { 

002 body { 

003 font-size: 70%; 

004} 

005} 

But this will leave the main content text unreadable, so 
let’s enter specific values to target only certain text: 

001@media only screen and (min-width : 320px) 
and (max-width : 480px) { 

002hl { 

003 font-size: lem /* 16px / 16px */ 

004} 

005} 

In this way, we can be sure that only the text we need to 
resize will do so. 

NAVIGATION 

Since putting together the wireframe and working with 
the actual HTML in the browser, an issue has emerged 
- the size of the navigation links in a reduced-width nav 
bar. Though they sat well side-by-side in the large 
screen version, we’ll stack them for mobile viewing. 

This makes them larger and easier for chubby little 
fingers to tap. 

The easiest way to achieve this is to change the 
display:inline value of the base layout to display:block 
for the 320 width media query. Then add a 
text-align:center to the nav div. More complex 
navigation styles will obviously require more complex 
solutions, and there are a number of jQuery plug-ins 
such as TinyNav.js that will cut out the heavy lifting for 
you. The point is that by using our media queries we are 
able to present a completely different navigation format 
for the mobile browser, and that is one more suited to 
the single finger than the cursor. 

IMAGES 

Our logo is currently an image, and while the client may 
enjoy seeing their logo writ large upon the small screen, 
we (as designers who know what we are doing) would 
be much happier if it fit more snugly to the left and 
allowed room for the Phone number to sit alongside it, 
as per our original design. We, therefore, add that handy 
img value to our style.css and make sure our logo scales 
down accordingly. 
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“THESE DAYS THE 
DESIGNER NEEDS TO 
KNOW HOW THE SITE 
WILL VIEW ON A 
NUMBER OF SCREENS” 

001img { 

002 max-width:100%; 

003} 

Now give #logo a width of 40% and watch the results. 
While our fluid grid is doing all the work for us, we can 
exert more control over certain elements by giving 
them specific widths in percentages. By giving the logo 
div a percentage width, we are telling it to reduce itself in 
relation to the screen and, in tandem with the img value, 
reduce the image as need be. Now we have a greatly 
reduced logo when viewed at mobile size. 

It should be noted that while this is a tried and tested 
method for resizing images in responsive designs, the 


issue of load time for larger images on smaller browsers 
is something that every designer will confront. It makes 
little sense for someone viewing an image on a 320 
screen to wait for a 1,420pxl wide, hi-res image to load in 
the postage stamp-size space allotted it. Not to mention 
the data usage involved. 

Thankfully there are some neat solutions for this 
problem, including a number of JavaScript snippets, 
such as Adaptive Images. This snippet sits in the <head> 
and utilises the cookie function and .htaccess file to 
either call from a series of stored images at different 
resolutions or intelligently resize the image and send it. 
Further to that, W3C have recently proposed a new 
<picture> element and srcset attribute for enabling 
multiple image loads by specifying media queries in the 
HTML for various image resolutions. 

TIME TO TEST 

One of the more daunting, time consuming tasks facing 
anyone building responsive websites is the testing 
phase. In the days before mobile devices really 
embraced web browsing, the designer was able to test 
all eventualities on one screen, and the worst of that was 
viewing the site on Internet Explorer. These days the 
designer needs to know how the site will view on a 
number of different screens, and that number is getting 
greater every year. 

Some designers argue that if your site is built well 
enough and is responsive in the truest sense of the 
word, rigorous testing is not only unnecessary, but 
misses the point. The site will do what it is supposed to 
do and adapt to any screen it encounters. While this 
sounds like an attractive proposition, it is somewhat 
idealistic. Unpredictable variables will always arise. 
Testing is vital. 

It’s a fair bet that anyone building a responsive 
website will have spent a lot of time dragging the edge 
of their browser window to watch the site adapt to new 
widths. It’s quick, it’s simple and it gives you an instant 
idea of how your site is working. But it can only tell you 
so much and isn’t a true representation. In an ideal 
world, designers would have access to a comprehensive 
suite of test devices for quick debugging. But beyond 
the top design agencies, this is highly unfeasible. Clearly, 
testing on the intended hardware will always be the 
perfect option, but failing that, there are many 
alternative options worth considering. 
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|<-AD0BE EDGE INSPECT 

html.adobe.com/edge/inspect 


■ Formerly known as Adobe Shadow, the Edge Inspect 
application allows you to connect all your devices wirelessly, 
display the website, and view changes concurrently, as they are 
made from the central PC. It also allows simultaneous 
screenshots from all devices for quick comparison. Edge 
Inspect requires a separate installation on each device, and 
while it is an excellent way to test and debug your site for 
multiple devices, the major drawback is that without the actual 
devices it is useless. Under the guise of Shadow, the application 
was a free Beta release. However, Adobe now offers a free 
version, which only allows one device to be tethered at a time, 
and the full function version, for a monthly fee. 


SCREENFLY 




k quirktools.com/screenfly 

I Simplicity is the word with QuirkTools’ browser 
simulator. Once you have pasted in your URL, 
Screenfly opens your site in a ten-inch netbook 
window and has a simple menu system at the 
bottom for alternating between resolutions. 
Choose first by device category, from mobile to 
television, and then by model and brand. 

Screenfly doesn’t offer the breadth of choice 
that you get when picking devices with Viewport 
Resizer, but it covers enough bases to help you 
gauge the success of your site. It also boasts a 
clean interface, smooth transitions between 
devices, and as such is a joy to use. These are just 
a few of the tools available to the web designer 
looking to give that website a quick road test. 

They may not be able to answer all the 
questions in the same way hardware tests will, 
but they can make testing a little less painful. 
Testing will always be an important part of the 
design process, no matter how site building 
techniques develop along the way. Increasingly, 
there will also be the consideration of multiple 
browsers on a single device. For example, some 
websites display differently on Android versions 
of Chrome and Dolphin, to name but two. The 
minefield designers need to traverse expands 
apace. Thankfully, so do the tools at our disposal. 


VIEWPORT RESIZER 

lab.maltewassermann.com/ 

viewport-resizer 

■ Malte Wassermann offers a quick and 
easy way to view your site in various 
dimensions with the Viewport Resizer. It 
employs a simple bookmarklet you can 
add to your toolbar and implement with 
one click. It then resizes the window to 
whichever device specification you 
request from the menu. 

Viewport Resizer is fully customisable. 
Simply choose the device widths, either 
from a list of devices or from a set of 
generic dimensions, and build the 
bookmarklet you want. It also offers 
orientation options for all sizes and 
scrolling within the window. It’s not 
exactly the most accurate replication of 
device Ul, but for the development and 
preliminary testing stages, Viewport 
Resizer is a great aid. 


THE RESPONSINATOR 




www.responsinator.com ^ 

■ Tama Pugsley and Andy Hovey have put together an 
excellent addition to the growing number of browser apps for 
viewing your site in multiple devices. Just pop your URL into the 
top box and The Responsinator will load it into several device 
simulations. Scroll down and you will see your website 
displayed in the iPhone 3 to 5, Android (320), Samsung Galaxy 
(380), iPad, and Kindle. All are viewable in both portrait and 
landscape. No browser app can replicate exactly how a site will 
display on any given device. However, testing a number of 
responsive websites and comparing the results with the actual 
devices reveals a high degree of accuracy. It’s an invaluable tool, 
both during the building stage and beyond. 
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Optimise your images for load times and SEP 


Optimise 
your images 
for load times 
andSEO 

Manage the size and quality of your 
images, speed up load times to make 
pictures search engine friendly 

tools I tecli I fronds Word Press export Jayson Winters 



s designers we’ll often 
spend a huge amount of 
time carefully crafting 
graphics for use online, 
but you shouldn’t think 
that’s the end of the 
process. To get the best 
results from your graphics 
you need to understand 
what happens next... 

This tutorial will show you what WordPress does 
when you upload images and the steps you can take to 
improve the results you achieve. Well also help you 
avoid the pitfalls that will adversely affect your image 
quality or make your files unnecessarily bulky. 

Currently, images are one of the most overlooked 
aspects of search engine optimisation (SEO). In this 
workshop, well cover some effective techniques you 
can apply to drive much more traffic to your site. 

Well also help you decide when to leave things to an 
image-management plug-in and other occasions when 
you might want to be a little more hands on. 



Currently, Images are one of the 
most overlooked aspects of SEO 



What’s that crunching? 


When you upload an image using Upload New 
Media, you might have noticed the progress bar says 
‘Crunching’. This is when WordPress is creating copies of 
your image at the three sizes specified in your Media 
Settings and any theme-specific custom image sizes (eg 
Twenty Twelve creates a 624px-wide image). 



Media Settings and they won’t be generated. 

Remember they won’t be available for selection when 
adding images to your pages or posts. Your theme may 
still generate its own custom-sized images though. 
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A quality decision 

If you decide you want to keep those images 
you’ll need to be sure that they achieve the right 
balance between quality and file size. The default image 
quality percentage is 90, but you can change this to 
any value you prefer either by installing a plug-in or by 
adding a single line of code to your theme. 




JPG Image Quality 

This plug-in adds an option to the 
Media Settings page to enter a 
value from 1-100 for the generated 
copies of your image. Settings above 95 
are unlikely to deliver a perceivable 
improvement and setting 100 will 
significantly increase file sizes. 
Remember that neither this plug-in nor 
the default WordPress setup will change 
the quality of your original image. 



simply add the following code to your theme’s function.php file. Ideally 
you’ll be working with a child theme and add this line to the function, 
php through Appearance>Editor and selecting Theme Functions. 


Remember that you will need to reapply this edit if you replace it with 
an upgraded version in the future. 


001 add_filter(’jpeg_quality', function($arg){return 95;}); 


O O _ _ FI File JLee - £x-rnple 

850x562-minimum-quality-original.jpg = 34Kb 
from-minimum-quality-origina1-100x100.jpg - 11Kb 
from-minimum-quality-original-500x330.jpg = 112Kb 
frofn-mlnimum-quality-original-624x412.jpg - 161Kb 


Lost for good 


If you upload a heavily compressed JPEG to your site and allow WordPress to generate resized copies at a 
higher-quality setting you’ll end up with larger files but with no improvement in quality. You’ll achieve the best results by 
creating the finished file you need from the highest-quality original image you have. 



The handmade approach 

If it’s manageable we’d normally recommend that you compress your 
images at each of the sizes you need them on an individual image basis and then 




Compression 
differences 

A 90% JPEG compression 
setting in WordPress 
won’t necessarily give 
you the same results as 
another optimisation tool, 
so be sure to try a few 
different settings and 
let your eyes decide.. 


upload them to WordPress. That way, you’re in complete control over the quality/file 


size decision and you are only creating files that you’re actually going to use. 


Smush.it real good 



01 _Lossless compression 

Available as a plug-in, WP Smush.it 
compresses your images even further 
with no impact on quality. In our tests we 
achieved savings of up to 43%! 



02 _Plug-in version 

Once installed and activated any new 
images will automatically be ‘smushed’. 
You can apply the process to existing 
images by going to Media>Bulk Smush.it. 



03 _Smush.it website 

If you prefer, go to www.smushit.com, 
select the Uploader tab and then grab 
some files for uploading, smushing and 
downloading at their reduced size. 
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Optimise your images for load times and SEP 


Going deeper... 

Delve a little deeper into JPEG compression and how your chosen 
optimisation tool works to achieve the best results. For example, you can dramatically 
improve the quality of some images by understanding the JPEG’s 8px grid. There are 
also some great tips online; for instance, use a quality setting of 51 in Photoshop. 




A new engine 


If you intend to use WordPress to generate resized images from your original 
image you should try out the ImageMagick Engine plug-in. This replaces the standard 
graphic library used by WordPress and can deliver huge improvements in the quality 
of resized images. ImageMagick is not as widely supported as the default WordPress 
setup so be sure to read the installation instructions. 


Rugiri DirGCtQiV 


Udlnra All Image Slteiv 

Kl 

-UsafikJhi 


Adding an image 
sitemap to your website 


Most experienced web designers 
already understand the value of 
creating a sitemap.xml file and telling 
the various search engines about it. 
This file is invaluable in letting the 
search engines know about all of the 
pages and posts on your website that 
you want to be listed in their search 
engine results. 

Image sitemaps are less commonly 
used but also provide a worthwhile 
search engine benefit. 

Fortunately they are just as easy to 
generate as regular sitemaps. Udinra 
All Image Sitemap is one of the most 
popular plug-ins that will produce 
your image sitemap and then upload 
it to Google, Bing and Ask.com. 

If you want to gain the most benefit 
from optimising your images we 
recommend you apply all the other 
techniques first and generate your 
image sitemap as a final step. 




The search engines 
constantly refine their 
algorithms to deliver better 
results. Original, high- 
quality content, including 
images, genuinely relevant 
to the searcher should be 
your number one goal. 
Always keep your target 
audience in mind. Create 
great new images and 
follow the other search 
engine-friendly techniques 
listed here and you’re 
much more likely to 
achieve good results. 


£ ^ s wf+ 3^-/1 u.- - 

=(*£ * Goosle +'i) / =(z£+ * 

° 3 

X * 2 + 2 i/**■ 4 )*** 

- Mu~ Ux) 


i 


Z *SI- Z 

L. V7- a. 




Provide some 
context 


Pages and posts that make 
consistent good use of related 
keywords within the image 
attributes and in nearby 
headings and body text will rank 
better than pages just containing 
images. That portfolio or case 
study you’re working on will 
really benefit from creating some 
associated text. Your audience 
will appreciate it and Google et al 
will reward you for it too. 
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Optimise your images for load times and SEP 


i? Resize - then upload 


Search engines penalise slow-loading sites. Avoid using WordPress to scale 
down your image on the fly. Instead work out the width and height you want the 
image to appear, create the very best, most optimised, suitably cropped and 
finished version of the image that you can - then upload it. 




Friendly file names 

Be sure to give your images search engine-friendly filenames that include relevant 
keywords separated by hyphens. It’s tempting to overlook this, knowing the filename 
won’t appear on the finished page - however, it will be seen when the page is crawled. 
See for yourself with a Google image search. You’ll find most of the top results contain 
the word or phrase that you used. 


A 

\ 


en^itec^draMying-hernte-Mclifig-ruler 


SEO Friendly 
Images plug-in 

This plug-in adds alt and 
title attributes to images. 
You can customise how this 
works, but you’ll get better 
results by completing the 
attributes yourself. 



File namer artMecfc-drawing-hands-holding-n 
File type: image/jpeq 
Upload date: November 6, 2012 
Dimensions: 600 » 4D0 


Edit Imago 



Edit Image 

Title 

Alternate Text 


File name: a remiect-Orawrng-:hands-holding 
File type: imags/jpeg 
Upload date; November 6, 2012 
Dimensions; GOO x4QD 


Scale Ruler on Blueprints 

Hands using white with red strip ruler mcasuri 
Alt text for the image, e.g. "T he Mona Lisa" 


Image title 
attribute 

The text you type here will pop up 
after hovering over the image for a 
second. Make it snappy and 
descriptive. Avoid repeating the 
same content for different attributes 
and using ‘stop words’; these are 
words that search engines tend to 
ignore and therefore offer no 
benefit. Search for stop word lists 
online to find out more. 


Along with the page title, lead and section heading, captions are the most 
commonly read words on a page. A good caption clearly identifies the subject of the 
image. Without being redundant, it is succinct, establishes the picture’s relevance to 
the page, provides context for the picture and draws a reader’s attention into the 
page. Why wouldn’t you use one? 


Captive captions 


What’s the alternative? 

This attribute was originally developed for visually impaired users so keep this 
in mind when crafting alt text. If you couldn’t see the image and hoped for the most 
helpful and richest experience, what alternative text would you wish the designer had 
provided? Type that text here and Google will reward you for your trouble. 



3 


File type: image/jpeg 


Upload dale: November 6, 2012 


Dimensions.: 600 * 400 

Edit Image 


Title 

* Beale Ruler on Blueprints 

Alternate Text 

Hands using white with rad strip ruler meesurir 
AN text for Ihe image, e.g. 'The Mona Lisa ' 

Caption 

Exceptional attention 1o detail 
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Optimise your images for load times and SEP 


The Description attribute 


This text appears on any page where the Attachment Post URL option is used 
when inserting an image and may also be used by some themes. If search engines 
can crawl to it they will take it into consideration when assessing a site’s relevance. 


Title 

Alternate Text 


Caption 


Description 


Scale Ruler on Blueprints 

Hands using white wilh rad strap ruler measunr 
Aft text far ihe image, e g. The Mona tisa p 

Efccepl Dnal attention to detail 

Two hands using a scale ruler on a set of bluep 
Canon EOS 50 Marfc II Focal length 135. F nui 


Visual HTML 

Hjucte del ins img ul ol Ir cede more lookup 
cre&n 

ttachroent_153 TI ol tflirv™ "^il XIMIMJ He" 1 width= ,l 6^ l, 7<d 
mage control. wpsonef pi t + co, uk/7 ottoc hment_i d=l S3 " 
t flp-att- J 53 p, ><| r mg 

□gecontrol, wpsandpit - co, uk/ttp-content/uploods/2012/ll 
□wing-hands-holding-ruler.jpg" alt= ,r Honds using white 
ruler measuring monotone archttect&#039;s plan* 
uler on Blueprints" widths“600" height-"400" _ 

Width and height 

When you add an image using Add Media the width and height are included in 
the code so the browser can build the page more quickly. If you add image code 
yourself be sure to include these attributes to avoid slowing your page. 



Image Info 

Firefox users can view 
more information on 
an image by right- 
clicking one, and then 
selecting View Image 
Info from the menu. 


Google Webmaster Guidelines Page Speed Webmaster Tools Blog 


Image ALT text tool 

This tool examines the images on your web page and 
tells you how well they are being "seen" by search 
engines like Google. 

enter URL: example - www.google.com 



This tool was 
created by 



Feed the bot 


This handy tool 
from www.feedthebot. 
com/tools/alt examines 
the images on a page, 
gives you information 
about the alt attribute and 
whether the width and 
height are set right. This 
can highlight issues with 
images you might have 
overlooked, like alt text for 
your site logo. Be prepared 
to edit your theme 
template to fix that one. 


Visit the Gallery 


The Gallery contains a variety of options you can easily set to 
suit your requirements and take better control of your images. 
Highlights include the ability to exclude specific images, which is useful 
if you don’t want a featured image to also appear again in your Gallery. 
Here’s the full list of options: codex.wordpress.org/Gallery_Shortcode, 
Remember, the Codex is your friend. 



|XU WordPress 

Showcase Therws 

Codex 

Gallery Shortcode 

Languages: English- 1 3-4T r : ■ PycEiuN ■ da 

n WordPrass 2 5. it» Gantry batur-t allow Ihe oplonlo add a^i saltery to 

The LgcLltpy] shortcode is used o a Posi or Pass ic-display a ifiumfchail Gallery 
trripieEHwTn MiBlhb; 



there’s still more you can do. Media handling improvements are likely to feature heavily in future 
WordPress releases and developers are always finding innovative ways of extending the platform’s 
functionality like Lazy Load, which only loads images when they are visible to the user. 
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essential 
hints and 
tips inside 


Tips STricks 


Learn the truth about iPhone, iPad, Android, Photoshop and 
more with the Tips & Tricks series'expert advice and tutorials 


BUY YOUR COPY TODAY 

Print edition available at www.imagineshop.co.uk 
Digital edition available at www.greatdigitalmags.com 


Available on the following platforms 



□ 


facebook.com/lmagineBookazines twitter.com/Books_lmagine 












Create a responsive animation with Adobe Edge Animate 


Create a 
responsive 
animation 
with Adobe 
Edge Animate 

Make web animations that adapt to 
the width of the viewing device 

tools I tor.li I trends Adobe Edge Animate export Mark Shufflebottom 



ecently Adobe 
announced a whole raft 
of smaller applications 
which carry the Edge 
prefix. Each of these tools 
is set to handle just one 
area of production. They’re 
not all-encompassing apps, 
but ones you dip in and 
out of as and when you 

need them. Edge Animate has been around the longest 
and here we’re using it to create responsive animation. 

With ever-more web content having to work across 
varying screens our online animations also need to be 
up to the task. Adobe created Edge primarily to get 
animated content on to mobile devices, but with it 
creating animations using DOM content you might 
assume it would be quite tricky to make them work in a 
scaling, multi-screen environment. But fear not, those 
clever people at Adobe have allowed all the settings for 
Edge Animate to work with percentage values. Not only 
that, but you can also define exactly what happens to 
each element when the content area is reduced. This 
covers whether something should scale, always remain 
centred or be clipped, so your animated designs always 
look their best, no matter how they’re being viewed. 


<Uelow> 

• Don’t let your animation go to waste on smaller devices - with just a little work it can be made to function on any sized screen 




Download and install 


If you haven’t done so already, 
visit http://html.adobe.com/edge/ 
animate and click on the Get Started 
button. You will need to log in to Adobe’s 
Creative Cloud; it’s free to join and the 
software is completely free. Download 
Edge Animate and install it on your 
computer. Copy over the Start folder to 
your desktop from the cover CD and 
launch the software to get going. 


All the settings for Edge Animate 
work with percentage values 



Create a new document 


Start a new Edge Animation from the splash 
screen. In the Properties tab change the title to 
‘StateOfPlay’, amend the width to 960px, the height to 
200px and the background colour to black. Now click 
the switch next to the width to make it 100%. Select the 
Max W parameter and change this to 960px too. All 
these tweaks will make the layout responsive. 
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Create a responsive animation with Adobe Edge Animate 


Import the images 

r Save the document as ‘index.html’ in the Start 
folder. You will now see the images folder in the Assets 
part of the Library panel. Drag ‘bg.jpg’ onto the stage in 
the top-left corner. In Properties this has a registration 
point which is what we need. Now drag ‘logo.png’ onto 
the stage and scale down to position as shown. 




Scaling the animation 

To test the stage is responsive 


click on the marker in the top-right of the 
stage panel. Drag it to the left to see the 
stage resize. We’re not scaling any of the 
background images, but we will change 
some of the content that we animate. 



Apply a preset 

Next drag the image ‘headspin.png’ onto the stage and position 
in the top-left corner. In Properties click on Use Presets for Responsive 
Layout and choose the Center Background Image option, then Apply. 
This means the image will stay central whenever the stage morphs. 



Responsive skills 

Drag the bottom-right corner 
handle so the Headspin image fits over 
the entire background. Notice the image 
doesn’t scale or stretch but stays in the 
centre. In the Position and Size tab is an 
expand button; click this and add a Max 
W of 720px. Change the width to 100% 
and press Enter. It will jump right back to 
75% but it has accepted the change. 


Resize the doc 

Click on the resize marker and 
drag to the left to see what happens 
when the stage is resized to a smaller 
layout. As you can see, the background 
is clipped but the Headspin image 
resizes to fit. We are going to allow the 
State of Play logo to be clipped 
because the games they make are the 
most important part of this animation. 


Ease into it 

Easing can radically alter 
how an animation is 
interpreted so it’s well 
worth experimenting 
with. Some options 
gradually move the 
object into place, while 
others create a more 
dynamic movement. 




Change the cursor 

From the image assets on the cover CD, drag in 
‘app-store-badge.png’. Position it at 12px for both the x 
and y locations within the Properties panel. Next, 
under the Cursor section, click the auto button and a 
pop-up menu will appear. Choose the pointer option 
so that if the user rolls their mouse over this area, they 
know that they can click to explore further. 


Link to the store 

In the Elements panel click between the '{}’ 
brackets for the app-store-badge layer in order to 
open up the Actions panel. Make Click the action, 
then select the Open URL button. Amend the URL 

to https://itunes.apple.com/gb/app/headspin- 
storybook/id394160278?mt=8 so that the link takes 
the user directly to the App Store. 


Workflow 
techniques for 
Edge Animate 



01 _Multiple image placing 

You can add several images to the stage at 
once by picking what you want from the 
assets folder (using Shift-click), then 
dragging them all onto the stage. 



You may need to add an action to the whole 
stage; if that is the case then you can 
deselect everything on the stage and pick 
an action via the ‘{}’ next to the title. 



03 _Preloader setup 

To set up the preloader, hit the preloader 
Edit button under Properties. A loading 
animation can be positioned with a 
percentage for responsive layouts. 
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Create a responsive animation with Adobe Edge Animate 


Create the animation 


In the timeline, click on the pin icon and drag the pin to one 
second on the timeline. Click the easing button and pick EaseOutBack. 
Now drag the Headspin logo to the left so the main detail is off the 
screen. You can also drop Opacity to 0%. Hit play to see it in action. 



Animate the badge 

* Position the playhead at 0.75 seconds and the 
pin at 1.5 seconds (click the pin icon off and on if it has 
disappeared). Change the easing to EaseOutBounce, 
then select the iTunes badge and drag it off the bottom 
of the stage. You can click the play button to see this in 
action again, though you might want to rewind first. 




12 Animate out 


Place the pin at 3.5 seconds and the playhead at 
four seconds. Drag the iTunes badge off the top of the 
stage; this will animate the badge off the stage. Now 
move the pin to 3.75 seconds and playhead to 4.5 
seconds. Change easing to EaseOutBack and drag the 
Headspin image off the bottom. Reduce Opacity to 0%. 



Understanding the 
basics of resizing 

your animation 


The key concept behind any form of 
responsive design is working to a 
percentage-based format. This means 
that values will change based on 
smaller screens so some content will 
end up looking considerably smaller. 
In dealing with this you have to decide 
if you want your whole animation to 
get smaller or just to go for one axis 
being shrunk. In this tutorial we opted 
for the latter. With this in mind, we 
placed anything that wasn’t 
absolutely essential on the right 
because that would be the first 
content to be lost when reloading. The 
next factor to consider is what you 
want to happen to content when 
viewing across various screen sizes. 
Fortunately the Layout Presets button 
goes a long way to solving many of the 
issues you might face by allowing you 
to select images to clip, always centre 
or to scale in a variety of ways. 


Set up the Lume image 

Turn the pin off and drag ‘lumel.png’ onto the 
stage and position at Opx on both the x and y axes. 
Change the Max W property to 720px and then click 
the switch so the width is based on percentage; amend 
this to 100%. From the Responsive Presets button select 
Clip Background Image before hitting Apply. 




14 Resize the animation 


If you resize the animation you’ll see the image is 
clipped; that’s because this part of the image has the 
most interesting content on the left-hand edge of the 
document, where the moustached man is. You need to 
decide what you most want the viewer to see before 
opting whether to centre or clip an image. 


p*.. “S'*™?., 


T 

Copy *n’ paste 




Not only can layers be 
copied with their animation, 
but individual parts of an 
animation can also be 
selected, copied and then 
pasted onto another 
element on the stage for 
a speedier workflow. 



Lume 

Your playhead should be on 4.5 
seconds; turn the pin on and move this to 
5.5 seconds. Make sure that easing is set 
to EaseOutBack. Now move the Lume 
image over and off the left-hand side of 
the stage. Once again reduce the Opacity 
slider to 0% in the Properties panel. 
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Create a responsive animation with Adobe Edge Animate 


Animating LumeOut 

Place the pin at 8.25 seconds and then put the playhead at nine 
seconds. Select the Lume image and move it off the bottom of the 
stage. Drag the Opacity slider down to 0%. Rewind the movie and 
press play to see your progress so far. You can also resize the stage 
while this is happening in order to get a sense of the responsiveness. 


Copy the badge 

Turn the pin off and move the playhead to 4.5 
seconds. Select the app-store-badge layer and then 
copy and paste it. In the Elements panel click on the 
copied layer and drag this to the top of the stack. This 
should now be positioned above the Lume layer. 




Change the URL 

With the copied layer of 


app-store-badge still active open the 
Actions window via the Elements panel. 
Change the URL address to https:// 
itunes.apple.com/us/app/lume-hd/ 
id502008751?mt=8 so that it links to the 
right content. Close the Actions pane 
now as we will not need it any more. 


Publish so far 


Go to the File menu and choose Save, then return to 
File but this time select Preview in Browser. You will see 
your animation playing. The big problem at the moment is 
that it plays but doesn’t repeat so well fix that in the next 
step. Refresh your browser and resize it to see the 
responsive sizing in action. 



Trigger happy 

Turn the pin off and place the playhead at the very 
end of the animation which should be nine seconds. From 
the Timeline menu choose Insert Trigger. The Script 
window will open again and a trigger icon will appear on 
the timeline. Choose the Play from option and, in the Script 
panel, change the value in brackets from 1,000 to 0. This 
makes the animation play in a loop. 


Final publish 

We publish again to finish the animation. Go to the 
File menu and choose Preview in Browser. This will run 
through the work and also publish the files you need - 
these will all be located in the folder that we saved our 
work into back in step 3. The Edge files will all need to be 
uploaded to your web server to make the project work. 
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Create a spinning cube with CSS 3D Transforms 


Create a 
spinning 
cube with 
CSS 3D 
Transforms 

Get to grips with the third dimension 
by making a 3D spinning cube that 
reacts to user input 

tools I tecli I trends HTML, CSS, JavaScript 
expert Tim Stone 



f you’ve ever thought that CSS 
is too basic then you haven’t 
met CSS 3D Transforms. As web 

developers we’re used to 
working on two axes - x and y 
- commonly known as left, right 
and top, bottom. 3D space 
introduces a third axis: z. 
Traditionally, the only time we 
use this is in changing the 

z-index of elements to stack them in a certain order. 

The 3D Transform functions at our disposal are: 
matrix3d, translate3d, translateZ, scale3d, scaleZ, 
rotate3d, rotateX, rotateY, rotateZ and perspective. Well 
be covering all but the translate and scale functions in 
this tutorial by making a cube with images spin as a 
result of user input. With the festive season - and the 
slew of board games it brings with it - upon us, we were 
inspired to make our own virtual die with CSS. 

WebKit has had support since 2009. Fast-forward 
three years and only the current versions of Internet 
Explorer and Opera do not have support for 3D 
Transforms, so as long as you use them in a way which 
means they gracefully degrade then you should have 
no trouble in adding some visual flair to your website. 
Reeder for Mac has a brilliant example of this in practice 
- check it out at http://reederapp.com/mac. 


Mark it up 

Well start by writing the markup for our die; 
ours is based on David DeSandro’s example (http:// 
desandro.github.com/3dtransforms/docs/cube.html). 

We need a container, the die div itself and then each 
face of the die inside it. To make for easier identification 
you might want to colour each face as well. 


001 

<section class=”container”> 

002 

<div id=”dice”> 

003 

<section class=”front side”>l</section> 

004 

<section class=”back side”>2</section> 

005 

<section class=”right side”>3</section> 

006 

<section class=”left side”>4</section> 

007 

<section class=”top side”>5</section> 

008 

<section class=”bottom side”>6</section> 

009 

</div> 

010 

</section> 


A little perspective 

You should now have a very basic list of 
numbers going down the page. We’ll start by adding 
some CSS to the containing section. This element is 
essential as it sets the 3D perspective to use for the 
cube. 3D perspective can be pretty confusing: as a rule 
of thumb, the lower the value the flatter the 3D 
elements appear - a value between 700-1,OOOpx 
usually works well. All CSS3 values are unprefixed for 
brevity, but add them into your own code (eg 
-webkit-perspective, -moz-perspective, etc). 


001.container { 

002 width: 200px; 

003 height: 200px; 

004 margin: 50px 350px; 

005 perspective: 1000px; 

> 

Preserve 3D 

Next we will add the basic values to the cube. 
We’re giving it a defined width and height in pixels 
because Firefox currently behaves oddly when given 
percentage values. The transform-style property 
ensures that child objects are also 3D (the other 
possible value is flat). 

001#dice { 

002 width: 200px; 

003 height: 200px; 

004 position: absolute; 

005 transform-style: preserve-3d; 

} 

Set the sides 

Each side of the die shares some common 
values. The box-sizing property ensures the border only 
detracts from the height and width, rather than adding 
to it. We position the sides absolutely so they sit on top 
of one another. This also means the last element is the 
one visible to non-compatible browsers. 


001 #dice .side { 

002 width: 200px; 

003 height: 200px; 

004 box-sizing: border-box; 

005 display: block; 

006 position: absolute; 

007 border: 2px solid black; 

008 background: #fff; 

} 

Rotate the faces 

Now each side is stacked onto one another we 
need to rotate and translate them to generate a cube. A 
cube is, of course, made up of six faces - each face is a 
square that is rotated by 90 degrees to make up the 
three-dimensional form. The translateZ function 
positions each plane in 3D space. We find the best way 
to get to grips with it is to play around with the values; 
try 200px and see what happens. 

001 #dice .front { transform: rotateY( 0deg ) 
translateZ( 100px ); } 

002 #dice .back { transform: rotateX( 180deg ) 
translateZ( 100px ); } 

003 #dice .right { transform: rotateY( 90deg ) 
translateZ( 100px ); } 

004 #dice .left { transform: rotateY( -90deg ) 
translateZ( 100px ); } 

005 #dice .top { transform: rotateX( 90deg ) 
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translateZ( 100px ); } 

006 #dice .bottom { transform: rotateX( 
translateZ( 100px ); } 


-90deg) 



Square or cube? 

^ You should now be presented with... a square! 
But don’t be fooled, it’s actually a cube front on. You can 
test this by opening up the inspector and manually 
updating the degrees in transform: rotateY(ndeg) on 
#dice to see the other faces reveal themselves. It’s 
important to tweak different values to see how they 
affect one another to really understand 3D Transforms. 

Settingup 

Now that our CSS is in place we can start adding 
some JavaScript to dynamically update and rotate the 
values. Create a file called ‘die.js’ and link to it from the 
HTML page. Within it we will declare some of the 
variables that we’ll be using to make it spin. 

001 //index.html 

002 <script src=”scripts/die. js”x/script> 

|03 //die.js 

|04 var rotateY = 0, 

005 rotateZ = 0, 

006 die = document.getElementById(‘dice’), 

007 height = window.innerHeight / 2, 

008 width = window.innerWidth / 2; 


(Preffix it 

Prefixes can very quickly become 
arduous to write. Luckily Prefixr 
(http://prefixr.com) lets you paste 
in your unprefixed code and adds 
it all in automatically to save you 
the hassle - and RSI! Better still, 
there’s a Sublime Text package 
(http://wbond.net/sublime_ 
packages/prefixr) 
that does the same job. 


Dealing with browsers 

Before we update values it would be useful to 
make a function that updates the CSS for us depending 
on which browser is being used to view the website (for 
example, WebKit browsers use webkitTransform, Firefox 
uses MozTransform, etc). To accommodate multiple 
browsers, we’ll write a function that accepts which 
element to style (el) and a string with the CSS Transform 
that we wish to apply (value). 

001 function setTransform( el, value ) { 

002 if ( typeof el.style.transform !== 
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<Lefl> 

• Our cube is almost there - it now 
rotates of its own accord and 
behaves all... cube-like 


• The simple addition of dot 
images makes our cube look 
a whole lot more like a die! 


J 


<Above> 

• CSS 3D Transforms have brilliant support on mobile devices 
- indeed, the majority are even hardware accelerated 


003 ‘undefined’ ) { 

004 el.style.transform = value; 

005 } else if ( typeof el.style.webkitTransform 
!== ‘undefined’ ) { 

006 el.style.webkitTransform = value;} 

007 else if ( typeof el.style.MozTransform 
!== ‘undefined’ ) { 

008 el.style.MozTransform = value;} 

else if ( typeof el.style.msTransform !== 
‘undefined’ ) 

009 {el.style.msTransform = value; 

010 } else if ( typeof el.style.oTransform !== 
‘undefined’ ) { 

011 el.style.oTransform = value; 

012 } else { 

013 alert(‘This browser doesnVt support 3D 
transforms’); 

} 

} 

Rotate the die 

To turn the cube all we have to do is update the 
CSS values every x milliseconds to give the illusion of it 
moving seamlessly. We reset the values once they 
reach 360 (ie have done one revolution), so they don’t 
go to silly astronomical figures. We then update rotateY 
by 1 and apply the Transform with setTransformO. 



rotateY—; 

003 event.pageX > width ? rotateZ++ : 
rotateZ—; 

004 setTransform( die, ‘rotateY(‘ + rotateY 
‘deg) rotateZ(‘ + rotateZ + ‘deg)’ ); 

} 


001 setInterval(function() { 

002 if ( rotateY >= 360 ) rotateY = 0; 

003 if ( rotateZ >= 360 ) rotateZ = 0; 

004 rotateY++; 

005 setTransform( die, ‘rotateY(‘ + rotateY + 
‘deg) rotateZ(‘ + rotateZ + ‘deg)’ ); 

}, 20 ); 

User interaction 

We now know how to update the die to rotate, 
but it’s really screaming for some user interaction. We’re 
going to influence the way it spins by changing its y and 
z axes every time the cursor is moved. event.pageY/X 
informs us where on the page the user clicked - we’ll 
use this data to adjust which direction it spins. 

001 function rotateDice( event ) { 

002 event.pageY > height ? rotateY++ : 
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Add in event listeners 


Then we simply need to include our mouse 
and touch events. One of the greatest advantages that 
CSS 3D Transforms can boast is that they work 
fantastically across mobile devices. A large part of this 
is because Apple championed the spec and has 
included support for it since the very first version of iOS. 
Android and BlackBerry also have support for 3D 
Transforms in their default browsers. 


001 document.addEventl_istener( ‘mousemove’, 
rotateDice, false ); 

002 document.addEventListener( ‘touchmove’, 
rotateDice, false ); 


12 From cube to die 


I So we’ve got a spinning cube - woohoo! That’s 
all well and good, but it’s not very, well, useful. Instead, 
we’re going to build on the work we’ve done so far and 
turn that cube into a die. Comment out the setlnterval 
and rotateDiceO functions - we’re going to use similar 
techniques but applied in a different way. 


Adding images 

To make it look more die-like we have created six 
SVG files of dots in the traditional layout. You’ll need to 
replace the text reading 1-6 with the images. SVG is an 
ideal format for 3D Transforms because, just like CSS, it 
scales without distortion when zooming in. This means 
that, even when animating, the graphics remain crisp 
and sharp. A great example can be seen on Beercamp’s 
latest site: http://2012.beercamp.com. 


001 

<div id=”dice”> 

002 

<section class=”front side”ximg 

003 

src=”i mages/1. svg”x/section> 

004 

<section class=”back side”ximg 

005 

src=” images/2. svg”x/section> 

006 

<section class=”right side”ximg 

007 

src=” images/3. svg”x/section> 

008 

<section class=”left side”ximg 

009 

010 

src=”images/4. svg”x/section> 

<section class=”top side’Ximg 

011 

src=”images/5. svg”x/section> 

012 

013 

<section class=”bottom side”ximg 
src=”images/6. svg”x/section> 

</div> 


Generating random numbers 

We’re going to write a function to simulate the 


roll of a real-world die by generating a random number 
between 1 and 6 and spinning the die to that number. 
Math.floor rounds up the number generated from Math. 
randomO, we multiply it by the sum of the highest 
number (6) subtracted by the lowest number (1) and 
add 1. This gives 0-5, so we add 1 to make it 1-6. 


001 function roll() { 

var result = Math.floor( Math.random() * ( 
6 - 1 + 1 ) ) + 1; 


<Helow> 

• A specially written function ensures that all rolls of the die 
are as random as the real thing 
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Using setTransformO 

Apart from the special case of 5 being on the top 
and 6 being on the bottom, we can rotate our die with a 
single line. Just as we made our cube by rotating 
90-degree right angles, we spin it in the same way. By 
doing 90 * (result), we get to the face we want - eg 90 * 
3 = 270, which is the angle of the third face. 


001 if ( result !== 5 && result !== 6 ) { 

setTransform( die, ‘rotateY(‘ + 90 * result 
+ ‘deg)’ ); 

} 


Exceptions to the rule 

In the case of 5 and 6, we’ll hard-code those 
values in. We’re also using a new Transform function 
here: rotate3d. This is a shorthand way of setting the x, 
y and z degrees simultaneously (akin to margin instead 
of margin-left). We could also have written 
rotateX(90deg) to produce the same effect. 


001 else if ( result === 5 ) { 

setTransform( die, ‘rotate3d(l, 0, 0, 
-90deg)’ ); 

002 } else if ( result === 6 ) { 

setTransform( die, ‘rotate3d(l, 0, 0, 
90deg)’ ); 

} 


Add a button 


We’ve decided to add a button so the user is not 
always reaching for the console to make the die roll. This 
is easily done with just a tiny bit of HTML5 and, in the 
following step, we’ll work on a click handler. 


001 <button id=”roll”>Roll the die!</button> 


Click and roll 


In our JavaScript file, add another click listener 
but this time to #roll that will trigger the rollO function. 
Now all you have to do is click the button and watch the 
die instantly change which face is presented to the 
viewer. You’d think that making it transition from one 
face to another might be quite difficult in 3D space, but, 
thankfully, browser vendors are on our side. 


001 document.getElementById( ‘roll’ 

).addEventListener( ‘click’, roll, false ); 




3D Transforms 101 


Understanding the concept behind 3D 
Transforms in CSS3 is pretty 
straightforward. The element is rotated 
about a single axis (or multiple axes), 
and the browser handles this for you, 
rendering in a three-dimensional scene. 

The reality of it is a little less 
predictable if you’re not familiar with 3D 
rendering, however. The origin for a 
transformation, the perspective of the 
viewpoint and element, plus the 
collapsing of other transformations can 
quickly make for a mess when you’re 
trying to create a simple effect. Also keep 
in mind that currently only WebKit 
browsers fully support the proposed 3D 
Transforms - although this will 
inevitably change over time. 

A great place to start learning about 
how 3D Transforms work is the WebKit 
blog, which features a series of examples 
and explanations to help you get up and 
running quickly: www.webkit.org/ 
blog/386/3d-transforms. 
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Add transitions 

The cherry on top is making the die transition to 
these different degrees instead of just displaying them 
straight away. We can do this with another CSS3 
property - transition - added to #dice. Now click the 
button and you’ll be treated to some eye candy (just 
don’t forget to prefix it!). You can also play about with 
different transition timing functions (ease, linear, etc) to 
see how each affects the spin. 

001 #dice { 

transition: all .5s ease-in; 

> 


setTransform( die, ‘rotate3d(l, 0, 0, 
90deg)’ ); 

} 

}, false); 

Conclusion 

Although in this tutorial we’ve only used images, 
because it’s just HTML and CSS we can make absolutely 
anything 3D that we want. That’s right, the floating cube 
of kitten GIFs and videos you’ve always dreamed of is 
now within reach! The following code is just one 
example of the flexibility 3D Transforms offer us. 


001 <div id=”dice”> 

002 <section class=”front side” 
xvideo 

003 src=”keyboard-cat.webm”x/section> 

004 <section class=”back side”><p>To the crazy 
ones</px/section> 

005 <section class-’right side”ximg 
src=”lolcat. jpg”x/section> 

006 <section class=”left side”xiframe 
007 src=”http: //www.webdesignermag. co. uk/”x/ 
i f ramex/sect ion> 

</div> 




Visual feedback 


Currently it’s not very clear to the user if clicking 
the button changed the value if the same number is 
generated. To give a bit of visual feedback we will spin 
the die and then set the correct value - this way, even if 
the same number is generated, the user will know for 
certain that their click was registered. 


001 var offset = Math.floor( result / 2 ); 
setTransform( die, ‘rotateY(‘ + 90 * offset + 
‘deg)’ ); 

002 setTimeout(function() { 

// previous if statements go here 
}, 250); 


In the right direction 

To prove that we’re now masters of 3D 
Transforms we’ll write a function that will spin the die in 
the direction of the arrow clicked. This is a bit more 
complicated than before because we have to parse the 
current value that the die is and then add or subtract 
90 from it; the annotated source code is on the CD. 


001 document.addEventListener(‘keyup’, 
function( event ) { 

002 var numbers, rotate; 

if ( event.keyCode === 37 ) { //left 
numbers = die.style.webkitTransform. 
match(/-?\d+/g); 

003 if (numbers === null) numbers = [0]; 

rotate = parselnt( numbers[numbers. 
length-1], 10 ) + 90; 

004 setTransform( die, ‘rotateY(‘ + rotate + 
‘deg)’ ); 

005 } else if ( event.keyCode === 38 ) { //up 
setTransform(die, ‘rotate3d(l, 0, 0, -90deg)’); 
006 } else if ( event.keyCode === 39 ) { // 
right 

numbers = die.style.webkitTransform. 
match(/-?\d+/g); 

007 if (numbers === null) numbers = [0]; 

rotate = parselnt( numbers[numbers. 
length-1], 10 ) + -90; 

setTransform( die, ‘rotateY(‘ + rotate + 
‘deg)’ );} 

008 else if ( event.keyCode === 40 ) { //down 
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Create a 3D scene using the Sprite3D JS library 


Create a 3D 
scene using 
the Sprlte3D 
JS library 

CSS is becoming ever-more powerful 
and for the first time we can render 
simple 3D scenes using CSS alone 

tools I tecli I fronds Photoshop (or other image editor for preparing images), 
Dreamweaver (or other HTML editor) export Sam Hampton-Smith 



ne of the most challenging 
aspects of using CSS 3D 
Transforms is getting your head 
around how all the different 
elements are positioned in 
relation to one another. 

Creating something as 
straightforward as a cube, for 
example, can quickly become really 
complex when you attempt to 
move or rotate the six different faces that make up the box, 
while maintaining their relative positions. 

Thankfully, with a bit of JavaScript many of these 
headaches can be resolved - leaving you to get creative 
with the potential of this fantastic addition to the CSS 
specification! Sprite3D abstracts the 3D Transforms offered 
by CSS3, and also makes it really simple to create basic 
three-dimensional elements such as cubes. 

In this tutorial, were going to examine how to make the 
most of the Sprite3D JavaScript library, and once we’ve got 
a handle on the basics, well go on to create a simple 3D 
scene complete with animations. 


Set up the page 

Our basic page contains nothing inside the 
<body> element other than two links to script files: 
Sprite3D.js (the library were using to make our scene 
easier to handle) and 3d.js, which is our own code well 
use to generate the scene. We’ve also created and 
linked a simple stylesheet that defines some 
background colours for different faces of a cube. 

001 <html lang=”en”> 

002 <head> 

003 <meta charset=”utf-8” /> 

004 <meta name=’HandheldFriendly’ 
content=’True’ /> 

005 <meta name=’viewport’ 

content=’width=device-width, initial-scale=0.7, 
minimum-scale=0.7, maximum-scale=0.7, user- 
scalable=0’ /> 

006 <title>Create Easy 3D scenes with 
Sprite3D</title> 

007 <link rel=”stylesheet” type=”text/css” 
href=”styles/screen.css” /> 

008 <head> 

009 <body> 

010 <script src=”scripts/Sprite3D.js” 
type=”text/javascript”x/script> 

011 <body> 

012 <html> 

Begin with a box... 

Something that’s pretty complicated to work 
out in vanilla CSS and HTML are the dimensions and 
positioning of a cube. Sprite3D makes this exceptionally 


simple, Indeed, using the boxO method we can define 
the width, height and depth of a cube, and the library 
will create it for us - making sure that all the faces are 
positioned correctly, and naming them accordingly for 
us to hook our CSS into. 

001 Create our 3D scene using Sprite3D 
002 (function(){ 

003 // display 3D content 
004 // Create the stage 
var stage = Sprite3D.stage(); 

005 // Create a box in 3D 

006 var cube = Sprite3D.box( 200, 200, 

200,’’.box”); 

007 stage.appendChild(cube); 

Sprite3D</title> 

008 } else { 

009 // display warning or alternative content 
010 alert(“Sorry, your browser doesn’t 
support this content”); 

011 } 


Rotate the box 

We can easily rotate the box randomly by using 
the rotationO method on our box object. To get this up 
and running let’s set up a timed interval that fires every 
three seconds and changes the rotation value. CSS3 
transitions will handle the animation for us, so the only 
thing we need to worry about is creating the change in 
values every few seconds. 

001 var i = setInterval(function(){ 

002 cube.css(“Transition”, “all “ + (.3+Math. 
random()*.3)+”s linear”, true ) 

003 .rotation( Math.random()*60-30, Math. 
random()*60-30, 0 ) 

004 .z( Math.random() * 300 - 150 ) 

005 .update(); 

006 >,1000); 

Create many boxes 

We can use a for loop and an array to create 
many boxes instead of sticking with just one. This time, 
we’ll also position each box randomly using Sprite3D’s 
position method - this is an abstraction of translate3D, 
and makes it easy to get our boxes into different 3D 
locations. Add the code shown in place of the existing 
box creation code to see this in action. 

001 (function(){ 

002 if ( Sprite3D.isSupportedO ) { 

003 // display 3D content 
004 // Create the stage 
005 var cube = new Array(); 

006 var stage = Sprite3D.stage(); 
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Some of the techniques in 
this tutorial aren’t rendered 
correctly by all browsers. The 
twisted trees, for example, 
don’t intersect correctly in 
some cases. If this irks you, 
drop the extra code until , 
^ support catches up. . ^ 


<Helow> 

• Our final scene is fully 3D and 
powered entirely using CSS3 
transformations. Sprite3D makes it 
easy for us to arrange our elements 
in 3D and control the viewport by 
rotating the container element. 
Individual elements animate using 
CSS transitions, allowing this to 
work on mobile devices too! 


007 var container = Sprite3D. 
create(“#container”); 

008 stage.appendChiId( container ); 

009 for (var i=0;i<10;i++) { 

010 cube[i] = Sprite3D.box( 200, 200, 200,”. 
box”+i ); 

011 container.appendChild(cube[i]); 

012 cube[i].move(parseInt(Math. 
random()*1000-500),parseInt(Math.random()*1000- 
500),parseInt(Math.random()*1000-500)). 
update(); 

013 } 

014 var i = setInterval(function(){ 

015 container.css(“Transition”, “all “ + 

(.3+Math.random()*.3)+”s linear”, true ) 

016 .rotation( Math.random()*60-30, 

Math.random()*60-30, 0 ) 

017 .z( Math.random() * 300 - 150 ) 

018 .update(); 

019 },1000); 

020 } else { 

021 // display warning or alternative 
content 

022 alert(“Sorry, your browser doesn’t 
support this content”); 

023 } 

}()); 


Create a container 

Now we have got lots of boxes, it doesn’t work if 
we just rotate the cubes, as we would need to calculate 
the respective rotation individually. Instead, we can 
rotate the container. First we need to add a container to 
rotate, and then make our boxes children of that 
container. Note, we can’t rotate the stage itself - 
otherwise strange, undesirable things will happen! 

001 var container = Sprite3D. 
create(“#container”); 

002 stage.appendChild( container ); 

003 var i = setInterval(function(){ 

004 container.css(“Transition”, “all “ + 
(.3+Math.random()*.3)+”s linear”, true ) 

005 .rotation( Math.random()*60-30, Math. 
random()*60-30, 0 ) 

006 .z( Math.random() * 300 - 150 ) 

007 .update(); 

008 }, 1000); 

Build up the scene 

Now you’ve got the idea of how Sprite3D works, 
it’s time to create something a little more complex than 
the cubes. We’ll start off by removing all the boxes and 
placing a floor into our scene. We need to rotate it 


through 90 degrees on the x axis to position it as a 
floor, and we’ll also move it halfway to the left so it 
aligns with the centre of the page. 


001 

var trees = new Array(); 

002 

var stage = Sprite3D.stage(); 

003 

var container = Sprite3D. 

create(“#container”); 

004 

stage.appendChild( container ); 

005 

var floor = Sprite3D.create(“#floor”) 

position(-500,0,0).rotation(90,0,0).updateQ; 

006 

container.appendChild(floor); 


Grow some trees 

Using the same approach we employed to 
make multiple boxes, we’ll now create a series of <div>s 
to represent trees in our scene. This time, we won’t 
position the trees randomly in all directions as we want 
them to stick to the floor. Add the following code, which 
is a variation of the code from step 4, to generate trees 
and scatter them across the ground. 

001 for (var x=0;x<8;x++) { 

002 trees[x] = Sprite3D.create(“.tree”). 

position(0-parseInt(Math.random()*800)+300,- 
150,0-parseInt(Math.random()*300-150)). 
update(); 

003 container.appendChild(trees[x]); } 
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Make a car 

Now we’ve got some trees in place, let’s build a 
car. Start by creating a single element and see how it 
looks. Once you’re happy with the basic shape, 
introduce some depth by using the same array 
approach, but positioning each copy of the car a single 
pixel back in 3D space from the previous one. 

001 // Create the car 

002 for (var x=0;x<20;x++) { 

003 // We create 20 copies stacked 

against each other to create a 3D look 
004 car[x] = Sprite3D.create(“.car”). 

position(-500,130,200+x).update(); 

005 container.appendChild(car[x]); 

Get the car moving 

We can move our car randomly by using a 
repeating event that fires every few seconds. When this 
function is called, it will arbitrarily move each copy of 
the car to a new position, and CSS transitions will then 
make it slide into place. Using a cubic-bezier transition 
sees the car shudder into its final position rather than 
arrive smoothly for a more realistic finish. 

001 // Move the car back and forth 
002 var carinterval = 


coloured boxes to understand how the final 
composition will look. Edit the stylesheet and add 
entries for .tree, #floor and .car to bring in graphics and 
set the <div> sizes. You’ll need to adjust for the new 
dimensions in your Sprite3D function calls. 

Add some clouds 

Let’s add some further depth and interest to our 
scene by putting in some cloud elements. Copy and 
paste the tree generation code, changing the 
references from ‘tree’ to ‘cloud’. Add an extra method 
call to the scaleO function in the code chain and set the 
scale to be something random between 0.1 and 1.0. 

001 // Create the clouds 
002 for (var x=0;x<8;x++) { 

003 randomscale = (parseInt(Math. 
random()*10)/10)+0.3; 

004 cloudEx] = Sprite3D.create(“.cloud”). 
position(0-parseInt(Math.random()*1000)+500,0- 
parseInt(Math.random()*300)-100, - 
230+(parseInt(Math.random()*250))). 
scale(randomscale).update(); 

005 container.appendChild(cloud[x]); 


Repeat the clouds 

As it stands, our clouds will move off the side of 
our scene and keep going for ever. We need to get 
them to move back to the left as they hit the right. We 
could just make them disappear and reappear, but 
instead by adding the code below we can push them 
back in 3D space behind the sky, and shoot them back 
to the beginning so they drift in a perpetual cycle. 

001 if (cloudEx].x()>600) { 

002 cloudEx].z(cloudEx].z()-320).update(); 

} 

003 if (cloudEx].z()<=-550) { 

004 cloudEx].x(-880).update(); 

} 

005 if (cloudEx].x()<=-700 && 

006 cloudEx].z()<=-240) { 

007 cloudEx].z(cloudEx].z()+320).update(); 

} 


Move the clouds 

We can use the same code 
we’ve got for our car to move M 
the clouds across our scene. 

However, instead of using the 
cubic-bezier transition, we’ll 
stick with linear, and while 
we’re there we can also 
change the number of pixels 
we move the cloud according to 
its scale. In this way, we’ll get a nice 
feeling of depth and speed variance. 


Control 
the camera 

In this tutorial we’ve got a 
camera that automatically 
roves around our scene. 
This helps to show off the 
scene, but you may 
prefer to allow the user 
to control the camera. 



setInterval(function(){ 


001 // Move the clouds across the scene 

003 randomx = 0-parseInt(Math. 


002 var cloudinterval = 

random()*800)+300; 


setInterval(function(){ 

004 for (var x=0;x<20;x++) { 


003 for (var x=0;x<8;x++) { 

005 carEx].css(“Transition”, “all 

2s cubic- 

004 cloudEx].css(“Transition”, “all 2s linear”, 

bezier(0.745, 1.650, 0.480, 0.660) : 

”, true ) 

true ) 

006 .position(randomx,130,200+x) 


005 .move(100*cloudEx].scaleX(),0,0) 

007 .update(); 


006 .update(); 

008 } 


007 } 

009 }, 3000); 


008 }, 2000); 


Add other elements 

Using the same techniques we’ve seen, add any 
other elements that you’d like to see in place at this 
point. We’ve added a ‘cuff’ to the front of our floor <div> 
to provide additional depth to the piece, and we have 
also dropped in a sky at the back to serve as a focal 
point and horizon line for the scene. 

Bring in graphics 

Now we’ve got the basics of our scene, it’s time 
to bring in some real graphics instead of relying on 



Sprite3D is a great library because it’s 
very lightweight - it doesn’t interfere 
with the semantics of your code and 
hooks directly into browser CSS3 
support, abstracting the differences 
between browsers and vendor 
prefixes automatically. Additionally, it 
can also build on to your existing 
HTML if you prefer to run a 
‘windowed’ stage (we used the 
full-screen technique in this tutorial). 

Sprite3D isn’t the only option 
available, however. Indeed, there are 
several alternatives available that 
offer varying levels of functionality 
and support. Many of these use the 
<canvas> element to create a 
three-dimensional environment, 
which offers finer granular control 
and consistent rendering, but isn’t 
quite as accessible to beginners as 
using standard HTML and CSS. 

If you’d like to explore some of the 
other options, take a look at three] s 
(http://mrdoob.github.com/three.js), 
Canvas 3D (www.c3dl.org) and 
SpiderGL (http://spidergl.org). 
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Create a 3D scene using the Sprite3D JS library 


Final elements 


Now we’ve got the clouds in place, add any final 
elements you’d like to see in your scene. We’ve created 
a sign on strings that drops down after an eight-second 
delay, and we’ve also included a rainbow for added 
depth and interest. Keep adding elements to your scene 
until you’re happy with the overall look. 


001 var rainbow = Sprite3D. 
create(“#rainbow”).position(-500,-285,-109). 
update(); 

002 var sign = Sprite3D.create(“#sign”). 
position(-200,-2000,120).update(); 

003 var grass = Sprite3D.create(“#grass”). 
position(-500,139,251).update(); 

004 container.appendChild(base); 

005 container.appendChild(floor); 

006 container.appendChild(cuff); 

007 container.appendChild(sky); 

008 container.appendChild(rainbow); 

009 container.appendChild(sign); 

010 container.appendChild(grass); 


Twist the trees 


Once we test our scene, we decide that our trees 
need a little more depth, so we’ve added a rotated 
version of each tree to create an ‘X’ shape in 3D space, 
with the two copies of each tree intersecting each other. 
Add the code below to create the same effect. This is 
very similar to our car with 20 copies for depth. 


001 // Create the trees 
002 for (var x=0;x<5;x++) { 

003 var rotationangle = 
parseInt(Math.random()*90); 

004 var posx = 0-parseInt(Math. 
random()*800)+300; 

005 var posz = 0-parseInt(Math. 
random()*200)+50; 

006 treename = “.tree”+parseInt(Math. 
random()*3).toString(); 

007 treesEx] = Sprite3D.create(treename). 

position(posx,15,posz). 

rotate(0,rotationangle,0).update(); 

008 treename = “.tree”+parseInt(Math. 
random()*3).toString(); 

009 treesrot[x] = Sprite3D. 
create(treename).position(posx,15,posz). 
rotate(0,rotationangle+90,0).update(); 

010 container.appendChild(treesEx]); 

011 container.appendChild(treesrotEx]); } 


17 Last tweaks 


Finally, now you’ve got a fully working scene, it’s 
time to adjust the settings for all your elements so they 
work together. We’ve amended the animation speed of 
the car, the easing for the movement and the delay for 
the sign dropping down. Tweak the design to taste and 
test across different browsers, replacing graphics and 
altering the position of elements accordingly. 


Code library 

Sprite3D in action 

Sprite3D makes it easy to create elements in 3D space, using a basic syntax 
for both generating elements and adjusting their position within the scene 


We create all the 
basic elements of our 
scene using built-in 
Sprite3D methods. 


001 //code snippet1// 1 piece of code, either one segment or x3 
snippets max 

002 var stage = Sprite3D.stage(); 

003 // A container to act as the camera 

004 var container = Sprite3D.create(“#container”); 

005 stage.appendChild( container ); 

006 // The static elements 

007 var base = Sprite3D.create(“#base”).position(-600,0,1). 
rotation(90,0,0).update(); 

008 var floor = Sprite3D.create(“#floor”).position(-500,0,0). 
rotation(90,0,0).update(); 

009 ... 

010 container.appendChild(base); 

011 container.appendChild(floor); 

012 ... 

013 container.appendChild(sign); 

014 container.appendChild(grass); 


The trees are created 
and positioned 
randomly, with each 
tree featuring a pair of 
<div>s intersecting 
(although this only 
works properly in 
Safari currently). 


001 // Create the trees 
002 for (var x=0;x<5;x++) { 

003 var rotationangle = parseInt(Math.random()*90); 

004 var posx = 0-parseInt(Math.random()*800)+300; 

005 var posz = 0-parseInt(Math.random()*200)+50; 

006 treename = “.tree”+parseInt(Math.random()*3).toString(); 

treesEx] = Sprite3D.create(treename). 
position(posx,15,posz).rotate(0,rotationangle,0).update(); 
007 treename = “.tree”+parseInt(Math.random()*3).toString(); 

treesrotEx] = Sprite3D.create(treename). 
position(posx,15,posz).rotate(0,rotationangle+90,0).update(); 
008 container.appendChild(treesEx]); 

009 container.appendChild(treesrotEx]); 

010 } 


We’ve created a 
single vehicle that 
consists of 20 copies 
of the car graphic 
stacked in z space - 
this makes the car 
feel 3D even if it’s a 
series of flat <div>s. 


001 // Create the car 
002 for (var x=0;x<20;x++) { 

003 // We create 20 copies stacked against each other to 
create a 3D look 

004 carEx] = Sprite3D.create(“.car”).position(-500,130,200+x). 
update(); 

005 container.appendChild(carEx]); 

006 } 


The clouds are 
generated with a 
random scale, and 
we use this to alter 
their animation 
speed later on 
in the code. 


001 // Create the clouds 
002 for (var x=0;x<8;x++) { 

003 randomscale = (parseInt(Math.random()*10)/10)+0.3; 

004 cloudEx] = Sprite3D.create(“.cloud”).position(0- 
parseInt(Math.random()*1000)+500,0-parseInt(Math.random()*300)- 
100,-230+(parseInt(Math.random()*250))).scale(randomscale). 
update(); 

005 container.appendChild(cloudEx]); 

006 } 
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MODERN WORKFLOW WITH YEOMAN 





faster way to make webapps” 



ne thing is certain: times sure have changed. 
Not too long ago, front-end development, 
though not simple, was manageable. Learn 
HTML, a bit of CSS, and you’re on your way. 
These days, however, for lack of better words, 
there are far more variables to juggle. Preprocessors, 
performance tuning, testing, image optimisation, and 
minification represent just a few of the key factors 
that the modern day front-end developer must keep 
in mind when working. 

For instance, though it’s easy to use, CSS certainly 
does not scale well. And, while powerful, JavaScript 
can at times be an ugly and difficult language to work 
with. Then there’s the performance aspect; no longer 


are we merely designing for Internet Explorer and 
Firefox. These days, we have myriad browsers, 
devices, resolutions, and connection speeds to 
consider when developing new applications. 

To say that ours is an incredibly tough industry 
would be the understatement of the century. 

The upside is that for every road block, solutions 
have certainly been provided by members of the 
community. Consider the CSS scaling issue; well, 
preprocessors, like Sass, LESS, and Stylus were 
introduced to drastically make our lives easier. What 
about the nasty CSS3 browser-prefixing issue? 
Compass takes care of that! And the JavaScript 
dilemma? Once again, CoffeeScript, and now 


Typescript, to the rescue! The only problem is that 
each new solution requires its own system and 
process. As one might expect, over time, this can 
significantly complicate your workflow. Now, we have 
multiple Terminal tabs open, each monitoring a 
subset of the files within our projects, listening for 
changes. And that’s just the tip of the iceberg. We 
haven’t yet touched on workflow, coding best 
practices, image optimisation, testing, and 
developing an automated build process. Even writing 
about all of these steps is shortening my breath! 

Wouldn’t it be fantastic if somebody wrapped up 
all of these preprocessors and best practices into one 
easy-to-use package? 
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SAY HELLO TO YEOMAN 

Created by some of the friendly folks at Google 
(including Paul Irish and Addy Osmani), Yeoman is 
the solution to your problems. As the core team puts 
it, Yeoman offers an opinionated workflow to get you 
up and running with new projects as quickly as 
possible. But what does this really mean? Well, it 
offers the ability to scaffold new projects, as well as 
the necessary frameworks and testing tools. What 
this essentially translates to is less tedious 
configuration, and more creation. 

To get started with Yeoman, we first need to install 
it from the command line. Go ahead and run the 
following command: 

001 curl -L get.yeoman.io | bash 

This script will perform a variety of things, including 
installing the necessary libraries for Yeoman to do its 
job. You’ll likely find that it requires a handful of steps 
on your part, but, don’t worry; it’ll tell you exactly 
what needs to be done! 

Once the installation completes, run yeoman to 
see what’s available. 



Above: Run the yeoman command to see what’s available 


You’ll find a variety of options, such as init for 
initialising a new project, build for creating a special, 
optimised dist folder for deployment, and install, 
which makes the process of dealing with package 
management as easy as possible. 

To learn more about what each of the options 
actually does, append --help to the command: 
yeoman init -help. 

Let’s create a new project with Yeoman. Create a 
new directory on your desktop, cd to it from the 
Terminal, and then run: 

001 yeoman init 

At this point, the program will prompt you to answer 
some questions. 

• Would you like to include Twitter 
Bootstrap for Compass? 

• Would you like to include the Twitter 
Bootstrap plug-ins? 

• Would you like to include RequireJS 
(for AMD support)? 

• Would you like to support writing 
ECMAScript 6 modules? 


Above: Yeoman is an opinionated toolkit for rapidly developing webapps 
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Above: Upon initialising a new application with Yeoman, you’ll first 
be prompted with a handful of questions 

These questions give you the ability to configure 
your new project right out of the box. For now, 
choose No to each question. 

If you’d prefer to bypass these questions in the 
future, instead run yeoman init quickstart. This will 
prepare a new application, with Modernizr, jQuery, 
and HTML5 Boilerplate baked in. 

With that single command alone, Yeoman instantly 
scaffolds a new project for you. Don’t let yourself be 
overwhelmed by all of these files, though; if they 
weren’t generated for you, you’d eventually create 
them manually. 

What do you get with a single yeoman init 
command? Just think of Yeoman as the helpful robot, 


who does all of the manual labour for you. ‘Yo, man; 
go fetch me jQuery and Modernizr!’ 

Now that we have ourselves a new project, let’s 
launch a preview server and begin monitoring the 
application for changes. 

001 yeoman server 

Instantly, Google Chrome will be launched, displaying 
your project (also, no more security errors). Well, 
that’s handy, but as you’ll quickly find, there’s much, 
much more to see. Place your browser and editor 
side-by-side, and try the following things: 

LIVERELOADING 

Change the hi tag’s text and watch it instantly update 
in the browser, without a refresh - Yeoman at your 
service! It achieves this via the LiveReload Google 
Chrome extension, but, if that’s not installed, a 
fallback reload process will be used. 
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MODERN WORKFLOW WITH YEOMAN 


Reference Help Blog Get Involved Install. 


SASS 

Change main.css to main.sass (or main.scss, if that’s 
your preference), and enjoy instant compiling and 
updating in the browser. To test it out, try creating 


001 // main.sass 
002 ©import 'grid' 
003 ©import 'buttons’ 
004 ©import 'module' 


compass 


is an open-source CSS Authoring Framework . 


and using a variable. 


001 // main.sass 

002 StextColor: #666 

003 body color: StextColor 

Why desk] fte/s love 

Compos. 

Compass i^ses Sass. 
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Nice! Zero set up required. You are now able to 
separate your stylesheets, as needed, and import 

them into main.sass. 
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Each time a file is saved, Yeoman will automatically 
re-compile your Sass into regular CSS and refresh the 
browser for you. 


COMPASS 

If you’re a Sass fan, then it’s likely that you also prefer 
the excellent Compass framework. No worries; 
Yeoman is happy to oblige. Compass support is 
already available; simply import the applicable 
modules, and continue as usual. 

001 // main.sass 

002 ©import ’compass/css’ 

003 
004 * 

005 +box-sizing(border-box) 

006 

007 .box 

008 width: 200px 

009 +transition(width Is) 

010 

011 &: hover 
012 width: 400px 

If you’re not yet a preprocessor convert, you have to 
admit: this is significantly better than the alternative: 

001 * { 

002 -WebKit-box-sizing: border-box; 

003 -moz-box-sizing: border-box; 

004 box-sizing: border-box; 

005 } 

006 

007 .box { 

008 width: 200px; 

009 -WebKit-transition: width Is; 

010 -moz-transition: width Is; 

011 -ms-transition: width Is; 

012 -o-transition: width Is; 

013 transition: width Is; 

014 } 


015 

016 .box:hover { 

017 width: 400px; 

018 } 

COFFEESCRIPT 

JavaScript is just fine and dandy, but some feel that 
CoffeeScript provides a considerably cleaner syntax 
that fills in many of the gaps in the language. 

Within the scripts/ directory, optionally create a 
new folder, coffee/, and add your first CoffeeScript 
file: person.coffee. 

001 # scripts/coffee/person.coffee 
002 class Person 


Save the file, and like magic, Yeoman immediately 
compiles it into vanilla JavaScript, and places the new 
file directly within the parent scripts/ directory. Why 
don’t you see for yourself? 

001 // scripts/person.js 
002 var Person; 

003 

004 Person = (function() { 

005 

006 function Person() {} 

007 

008 return Person; })(); 


Perfect, and more importantly, effortless! 




CoffeeScript 
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Above: CoffeeScript is a beautiful little language that compiles into JavaScript 
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Now, import it in the same way that you normally 
would: 



Above: Behind the scenes, Ben Alman’s Grunt tool is what configures the compilation 


If you need to modify the directory structure in 
any way, refer to the gruntfile.js file within the root of 
your application. Behind the scenes, Ben Alman’s 
Grunt tool is what configures the compilation. 

At this point alone, Yeoman has given us a great 
deal of flexibility. With that single yeoman init 
command, you may now style your websites with 
Sass, code in CoffeeScript, and as you make changes, 
instantly see the updates reflected in the browser. 

But we’re not done yet, Not even close! 

PACKAGE MANAGEMENT 

Yeoman leverages a powerful package manager for 
the web, called Bower. What’s a package manager? 
Well, if you’re still manually downloading, for 
instance, the Underscore library from underscorejs. 
org, then you’re doing it wrong. What happens when 
the library is updated a few months later? Will you 
manually redownload the library again? Time is 
money; so let Yeoman do the work for you. 

Let’s pull Underscore into our project. 

001 yeoman install underscore 

Yeoman will respond to this command by 
downloading the latest version of the library and 
placing it within a new vendor directory. Now it’s 
ready to be used! 

001 <script src="scripts/vendor/underscore/ 
underscore. js"x/script> 

But, what if we’re not exactly sure what the name of 
the asset we require is? In these situations, we can 
refer to Yeoman search. Without passing any 
arguments, Yeoman will return a list of every asset 
that is available to install. Let’s search for the popular 
normalize.css project, by Nicolas Gallagher. 


Remember: Bower isn’t exclusively for JavaScript- 
specific assets. 

001 yeoman search normalize 

At the time of writing, two projects should be 
returned to us: 

001normalize-css git://github.com/necolas/ 
normalize.css.git 

002underscore.normalize git://github.com/ 
michael-lawrence/underscore.normalize.git 

It looks like normalize-css is the one we want. 

001 yeoman install normalize-css 


001 <link rel="stylesheet’’ href="scripts/ 
vendor/normalize-css/normalize.css"> 

Alternatively, rename the file to normalize.scss, and 
import it into your main.sass file. 

001 //main.sass @import ’../scripts/vendor/ 
normalize-css/normalize’ 

There’s a variety of other Bower-specific commands 
that you’ll want to remember: 

Yeoman uninstall jQuery - Uninstall a package. 
Yeoman update jQuery - Update library to the latest 
version. 

Yeoman list - List all currently installed packages. 

TESTING 

If testing is not yet part of your workflow, it should 
be! What could be better than a robot that 
automatically verifies your work after each save? 

Luckily, Yeoman makes it incredibly easy to test 
your applications. Out of the box, the popular Mocha 
framework and PhantomJS (headless WebKit) are 
available. However, it’s easily configurable, if you 
prefer a different tool, like Jasmine. Additionally, it 
offers the Chai assertion library, which you’ll quickly 
grow to love. 

Open the tests/index.html file. Toward the bottom, 
you’ll see a couple of sample tests provided. Go 
ahead and delete those and create a new test file: 
spec/person.js. Here’s a test to get you started. 

001 // test/spec/person.js 

002 describe('A Person’, function() { 

003 it(’should have an age above 0’, 



Above: Chai is an assertion library for Node and the browser that can be paired with any JavaScript testing framework 
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Above: With Yeoman, we’ve managed to build a simple tool for displaying specific tweets in minutes 


function() { 

004 var person = new Person name: 

’Jeffrey’, age: 27 

005 expect(person.age).to.be.above(0); 

006 

007 }); 

008 }); 

SHOULD INTERFACE 

If you’d prefer to use Chai’s (an assertion library) 
should interface, return to index.html, and change 
expect = chai.expect to should = chai.shouldO. Now, 
you can update your spec, so that it reads: 

001 person.age.should.be.above(0); 

Which method you choose is entirely up to you. There 
is no correct choice; only preferences. 

To run this test, return to the Terminal, and type: 

001 yeoman test 

As expected, the test should fail with the message: 
“Can’t find variable: Person.” It’s a failing test, but, 
more importantly, it works - we’re testing! Because 
Yeoman leverages the excellent PhantomJS tool 
(headless WebKit), these tests can even be run 
without the browser. 

COFFEESCRIPT TESTS 

If you prefer to write your tests in CoffeeScript, you’ll 
need to make a couple tweaks to your gruntfile.js. 
Begin by adding a new compile object to the compass 
task. Within this object, specify the files that should 
be watched. In this case, we’re instructing Grunt to 
compile all CoffeeScript files within test/s pec/coffee. 

001 // Coffee to JS compilation 
002 coffee: { 

003 

004 dist: { 

005 sre: ’app/scripts/**/*.coffee’, 

006 dest: ’app/scripts’ 

007 }, 

008 compile: { 

009 files: { 

010 ”test/spec/’’: ”test/spec/coffee/*. 

coffee" 


011 


012 

> 

013 

} 


The final step is to tell Grunt to keep an eye on that 
directory. When a file is saved, it should be 
recompiled, accordingly. 

Find the watch task, and update the coffee object, like 

SO: 

001 coffee: { 

002 files: [’<config:coffee.dist.src>’, 


’test/spec/coff ee/*.coffee’], 

003 tasks: 'coffee reload' 

004 } 

Above, we’re simply adding a new path to the files 
array. This way, Grunt knows that it needs to watch 
the test/spec/coffee directory as well for changes, 
and run the coffee and reload tasks accordingly. 

PUTTING IT ALL TOGETHER 

To illustrate a few more of Yeoman’s abilities, let’s 
take this new learning, and apply it to a simple project 
from scratch. Our goal is to display the latest tweets 
about Yeoman on the page, and include the tweeter’s 
avatar, and a link to the original tweet. 

We begin by rapidly creating a new application 
with Yeoman. 

001 mkdir tweets && cd tweets yeoman init 
quickstart 

Next, we boot up the server and begin watching 
the Sass and CoffeeScript files for changes. If you’re 
working along, be sure to place your browser and 
editor side-by-side for the best workflow. 

001 yeoman server 

Feel free to remove the boilerplate HTML that 
Yeoman provides as an example. Next, we’ll start 
writing the necessary code to fetch the tweets. Within 
the scripts/ directory, create a new coffee/tweets, 
coffee file, and reference the compiled version of this 
file within index.html. 


001 <link rel="stylesheet" href="scripts/ 
tweets.js"> 

Next, we’ll fetch the desired tweets using Twitter’s 
easy-to-use Search API. To fetch a JSON file 
containing these tweets, we can use the following 
URL: search.twitter.com/search.json?q=yeoman.io. 
However, because we’ll be fetching this data, using $. 
getJSON, we’ll need to specify a callback parameter, 
so that we trigger Twitter’s JSONP format. 

Refer to Twitter’s API for more search options, dev. 
twitter.com/docs/api/1/get/search. 

Let’s create the class. 

001 # scripts/coffee/tweets.coffee 
002 App = App or {} 

003 

004 class App.TweetsCollection 

005 constructor: (query = 'yeoman.io’, 

006 apillrl = 'http://search.twitter.com/ 

search.json') -> 

007 

008 @query = query 

009 @apillrl = apillrl 

010 

011 fetch: -> 

012 

013 $.getJSON "#{@apillrl}?q=#{@ 

query}&callback=?" 

Note that we’re using dependency injection (from 
the constructor) to make the actual process of testing 
this code (beyond the scope of this tutorial) 
considerably easier. 
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If you’d like to try it out, within your browser’s 
console, just run: 

001 var tweets = new App.TweetsCollection 
tweets.fetch().done(function(data) { 

002 console.log(data.results); 

003 }); 

The console should now display a list of tweets, which 
reference yeoman.io. 

Now that we’ve managed to fetch the tweets, we 
next need to prepare the HTML to display them. 

While it’s recommended that you use a proper 
templating engine, such as Handlebars or even 
Underscore’s implementation, for the purposes of 
this tutorial we’ll keep it simple. Luckily, CoffeeScript’s 
block strings and interpolation features make the 
process of embedding HTML as elegant as possible. 

001 class App.TweetsView 
002 el: $(’<ul>’) 

003 

004 constructor: (tweets) -> 

005 @tweets = tweets 

006 

007 render: -> 

008 $.each @tweets, (index, tweet) => 

009 # Try to use a templating engine 

instead. 

010 @el.append """ 

011 <li> 

012 <img 

013 src=’#{tweet.profile_image_ 

url}’alt=’#{tweet.from_user}'> 

014 #{tweet.text} 

015 </li> 

016 
017 @ 

Note: when you’re ready to use a dedicated 
templating engine, don’t forget to install it with 
Yeoman and, behind the scenes, Bower: yeoman 
install handlebars. 

This code is fairly simple. When instantiated, it’ll 
expect an array of the tweets (which we already know 
how to fetch). When its renderO method is triggered, 
it will cycle through that array of tweets, and, for each 
one, append a list item with the necessary data to an 
unordered list (@el). That’s it! 

If you’re curious about the => sign (instead of ->), 
that’s what we refer to as a fat arrow in CoffeeScript. 

It ensures that, within the anonymous function, this 
will still refer to the TweetsView object, instead of just 
the single tweet. 

Now that our code is in place, let’s get the ball 
rolling! Back to the index.html file, and add a new 
app.js reference. 

001 <script src="scripts/vendor/jquery.min. 
js”x/script> 


002 <script src=”scripts/tweets.js''x/script> 
003 <script src=”scripts/app. js”x/script> 

Within scripts/coffee/app.coffee, add: 

001 tweets = new App.TweetsCollection 
002 

003 tweets.fetch().done (data) -> 

004 tweetsView = new App.TweetsView(data. 

results).render() 

005 $(document.body).html tweetsView.el 

Upon saving this code, thanks to Yeoman, we can 
watch the browser instantly refresh to display the 
latest tweets about Yeoman! 

You might be wondering where that done method 
is coming from. This is necessary because, behind the 
scenes, when the fetchO method is called on App. 
TweetsCollection, an AJAX request is being made. As 
such, a promise is being returned. 

Think of a promise as jQuery promising to notify 
you when an asynchronous operation has completed. 
When this async request is done, then execute this 
callback function. 

Admittedly, this was a fairly simple project, but 
Yeoman has significantly improved our workflow. 

The final step is to build the project, in order to 
optimise our assets and images (if applicable) as 
much as possible. 

001 

002 yeoman build 
003 

This command will instruct Yeoman to run all 
necessary tasks, and ultimately produce a new dist 
directory that should be pushed to your server for 
production. All files will be compressed and 
optimised. Once the operation completes, we can 
preview it by running: 

001 

002 yeoman server:dist 
003 

View the source and notice how the assets have 
been compressed. But we can do better. At this point, 
the scripts and stylesheets (not applicable in our 
project) haven’t been concatenated. Let’s fix that with 
Yeoman! Return to your index.html file, and wrap the 
script references with an HTML comment, which 
instructs Yeoman to concatenate and minify the 
contained files. 

001 <!— build:js scripts/scripts.js — > 

002 <script src=''scripts/vendor/jquery.min. 
js”x/script> 

003 <script src=”scripts/tweets. js”x/script> 
004 <script src=”scripts/app. js”x/script> 

005 <!— endbuild — > 



Above: Stay up to date with Yeoman at http://twitter.com/yeoman 


This translates to: when building the project, 
concatenate all of the files within the build:js 
comment block, and replace the scripts with a single 
reference to scripts/scripts.js, which Yeoman will 
automatically generate for you. 

This way, in production, we’re working with only 
one HTTP request instead of three! This also can be 
used for your stylesheets, though, if you’re using 
Sass, it’s unnecessary. 

With that change in mind, let’s build and preview 
the project again. 

001 

002 yeoman build yeoman server:dist 
003 

It still works! View the source, and notice that we now 
only have one script reference. 

001 

002 <script src="scripts/110552aa.scripts. 
js”x/script> 

003 

Folks, this is free optimisation. No hidden fees. Use it! 
Your final step would be to push the dist folder up to 
your server, and head home for the day! 

CLOSING THOUGHTS 

You’ll also be excited to know that there’s still so 
much more to Yeoman than what has been covered 
in this article, such as sub-generators. In addition to 
scaffolding out entire frameworks, we can also 
rapidly generate the smaller parts, such as for 
models, views, and so on. 

Perhaps the greatest thing about Yeoman is that 
it’s open. While some similar tools cost money, 
Yeoman is open source, which means that you - yes 
you - can fork it, and help improve it! 

As the web moves more and more toward 
client-side-centric applications, Yeoman couldn’t have 
come at a better time. So, forget the preparation and 
configuration; let’s start building things. 

To stay up to date with the latest Yeoman news, or 
to make suggestions and log feature requests, feel 
free to follow @yeoman on Twitter, and subscribe to 
its Google group (groups.google.com/ 
forum/#!forum/yeoman-dev). 
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web workshop 

Scrolling backgrounds 
with an animated twist 

inspiration www.divabymakole.at 



here are so many examples 
of websites out there that 
have a good design, but 
not always a boundary¬ 
pushing user experience. 
Occasionally, though, you 
will come across a website 
that offers a real wow factor 
as you explore it, providing some form of 
graphical awesomeness out of the blue. 

When good design and interactivity are 
brought together you get a very memorable 


site. The Diva website has an incredibly simple 
design on first impressions. There’s a model in 
the background and the content is deliberately 
placed towards the bottom of the screen 
inviting you to scroll. As the user moves 
down the page, however, the 
background image comes alive as 
a seguence of images reveals the 
model getting dressed, with the 
content sliding over the top. All 
in all, it makes for a fun and 
unexpected experience. 




Tone it down 

Reducing the colour in the 
background achieves two things. 
Firstly it cuts down on data so an 
image can be compressed further. 
Secondly it allows the main content 
to be read much more clearly over 
the top without the backdrop 
musclina in on the forearound. 


INSPIRATION 

Simplicity is key 

So often a website will try and cram far 
too much detail in, with sidebars and 
content all over the place. The Diva 
website keeps its content relatively simple, 
in a single column for the majority of the 
page. This enhances the background 
image content and makes it easy to scale 
for smaller devices. The design has 
suitably been thought through when 
moving to tablet-style displays, as the 
menu moves from the side to the top. 
Again, when moving to a smaller 
phone-sized display, the background 
^ image becomes fixed saving the 
browser the extra workload of 
dealing with those images. 



Navigation 

The navigation floats 
freely down the left- 
hand side of the page 
and is sticky so that, as 
the user scrolls, this 
never goes away. 


Get animated 

The animated background 
is a great feature of the 
site. As the user scrolls it is 
quite unexpected to see 
the image spring to life 
and start to get dressed! 


Layout 

The layout of the Diva 
site has been mainly 
kept to a single 
column with large text 
taking full advantage 
of the space available. 


Size 

As the website can be 
viewed on a number 
of screen sizes the 
content adjusts with a 
responsive layout for 
the text and menus. 


Links 

Clicking on the links in 
the sections opens a 
new page with all the 
content available for 
browsing in a more 
traditional format. 


Phone 

Phone-sized screens are 
served a static backdrop 
instead of the animated 
one. This makes content 
easier to access for those 
browsing on the go. 
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Scrolling backgrounds with an animated twist 



<comment> 

What our 
experts think 
of the site 


Inspiring interactions 

“The moving image in the background of the Diva website works so 
successfully because the user isn’t accustomed to the background 
changing too much. In order to improve user experience think about how 
visitors interact with your site and what might be altered to give your users 
a more memorable experience - this is certain to drive traffic.” 

Mark Shufflebottom 



TECIINIQU Scroll-driven animated images 


Start the document 

Open a new HTML document and add the code 
below into the head section. This links up to the jQuery 
library and establishes the main structure of the page. 

001 <script src="http://code.jquery. 
com/ jquery-1.7.2. min. js”x/script> 

002 <style type=”text/css”> 

003 body{ 

004 margin: 0; 

005 height: 1800px; 

006 min-height: 1800px; 

007 padding: 0; 


001 <div id=”imageSwap”> 

002 <img class="l" src="l.jpg" /ximg 
class=”2" src="2.jpg" /ximg class=”3" 
src="3.jpg” /ximg class=”4" src="4. 
jpg” /> 

Add the jQuery 

Now, underneath the div tag in the body section, 
add the following code which defines a JavaScript area and 
records the position of the scrolling. As the user moves 
down the document the scroll position is saved in the yPos 
variable. This then changes the position variable for every 
300 pixels that are scrolled. 



Complete the CSS 

In the head continue adding the CSS as shown. 
This styles the image swap div area and allows it to fill the 
full screen. We create a fixed class that we add with 
jQuery then we add a class for each image. Continue 
adding classes for 3 and 4; these will be the same as 2 
but with a higher z-index, positioning images correctly. 

001 imageSwap{ 

002 position: fixed; 

003 overflow:hidden; 

004 top: 0px; 

005 left: 0px; width:100%; 

006 } 

007 #imageSwap.fixed { 

008 position: fixed; 

009 top:0 px; 

010 } 

011 .1 { 

012 position:absolute; 

013 z-index:1; 

014 } 

015 .2 { 

016 position:absolute; 

017 display:none; 

018 z-index:2; 

019 } 

020 </style> 


Add the body content 

Move to the body section now. The following code 
adds a div tag to the document that contains a series of 
images. The CSS turns the visibility of all the images off 
except for the topmost (image 1). Using jQuery we will 
activate the appropriate image as the user scrolls. 


001 <script language=”javascript" 
type=”text/javascript”> 

002 var thisPos=l; 

003 var lastPos=l; 

004 $(document).ready(function () { 

005 $('#imageSwap').addClass('fixed'); 
006 $(window).scroll(function() { 

007 var yPos = $(window).scrollTop(); 

008 if (yPos <= 300){ 

009 thisPos=l 
010 } 

011 if (yPos > 300 && yPos < 599){ 

012 thisPos=2; 

013 } 

Switch the images 

To give the illusion the background is moving, the 
images in the div tag are switched between. This is done by 
fading in the new position class and fading out the old 
position. The last position variable is updated after every 
scroll so we know where the user is in the document. 


001 if (yPos > 600 && yPos < 899)-C 
thisPos=3; 

002 } 

003 if (yPos > 900 ){ 

004 thisPos=4; 

005 } 

006 if(thisPos != lastPos){ 

007 $('.'+thisPos).fadeln(10); 

008 $('.'+lastPos).fadeOut(10); 

009 } 

010 lastPos=thisPos; 

011 »; 

012 }); 



TECHNIQUE 

Create your own 
imagesequence 


In order to create an image sequence 
background like Diva, you will need to set up 
a DSLR and capture your subject. Ideally you 
would do this in a studio, but a well-lit room 
with a decent flash can work just as well. 


Set up the shot 

You need a steady shot so grab a 
camera and you will definitely need a tripod. 
If you haven’t got a floor-mounted tripod 
then a GoPro or mini tripod will suffice. Use 
a plain white sheet for the background. 



Import into Photoshop 

Once you have captured your 


subject bring the first image into Photoshop 
and add a new layer. Use a Radial gradient 
with the foreground set to white and the 
background set to black, then drag from the 
centre out to apply a vignette. Lastly, change 
this layer’s blend mode to Multiply. 



Colour tweaks 

Press Cmd/Ctrl+U to call up the Hue/ 
Saturation panel and drag the Saturation 
slider down to take some colour out of the 
image. Save the file and drag in the other 
shots, using this as a template. 
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Neon edges 

Neon lighting effects carefully 
trace the edges of both buttons 
and panels. This ties in with the 
site’s theme, but is careful not to 
disrupt legibility of the text. 


Background 

The site’s backdrop is kept 
dark and moody, with some 
cool artwork hinting at the 
famous TRON landscape. 


Font style 

The typeface has a boxy, 
digital look. It’s plain so 
as not to distract from 
the special effects. 


Negative space 

The neon effects are limited 
and thus accentuated by 
the surrounding black 
negative space. 


Logo 

The logo is effectively this 
site’s brand - a motif from 
which all other effects 
take their cue. 


Sci-fi effects in Photoshop 

i nspi ration www.disney.co.uk/tron 




What our 
experts think 
of the site 


inemaisawash with awesome 
sci-fi special effects right now 
that are being deployed in 
branded websites, as well as 
inspiring others to create 
more personalised styles. 
From floating transparent 
panels to holographic Flash 
effects and energised lighting and colour, 
many sites are being given a futuristic twist. 

A great example is www.disney.co.uk/tron. 
The site’s design follows the aesthetics of the 
TRON 2.0 brand meticulously, littered with 


neon lighting - most noticeably in the page’s 
buttons and panels. These sport outer glow 
effects that are further boosted through the 
use of textures, along with a little Flash 
animation and electronic audio. 

Flere we’ll show you how to 
recapture the 2D effects of this 
website using the power of 
Photoshop’s layer style options 
and shape tools. These J 

effects can be enhanced 
further still with a bit of 
your own creativity. 




Push the effects 
to the max 

You can take your buttons to another 
level by applying hot to soft orange 
gradients and a thin Ipx Inside Stroke 
at 30% Opacity. This will further 
enhance your luminous effects. 
Grouping respective layers into Smart 
Objects and sharpening also helps to 
intensify the futuristic feel. 


Tron renaissance 

“In 1982 Tron was released and 
inspired millions of graphic 
designers, spawning franchises 
across the globe. Sadly, for 
many years, the film’s looks 
couldn’t be translated online 
- hardly a surprise as the web 
didn’t really take off until six 
years after the film! However, 
with a resurgence of the brand 
thanks to TRON: Legacy 
(released in 2010), and the 
much more advanced 
capabilities of contemporary 
software, these boundaries 
thankfully no longer exist.” 

Adam Smith 


EXPLORE THE TRON SITE FOR HIDDEN CONTENT 
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Sci-fi effects made easy 


■TOOLTIPS 

Create a bokeh brush 

Bokeh is great for enhancing focal points in lighting 
effect images. It creates the illusion of depth of field 
in 2D digital formats - a great asset for web 
designers looking to create authentic floating or 
holographic futuristic elements. 

Creating this effect wholly in Photoshop is easier 
than you might think. Start by opening a new layer 
and applying a light grey (#6c6c6c) Ellipse shape. 
Add a white 2px Stroke set to Outside. Ctrl-click your 
shape layer, selecting Convert to Smart Object. 
Cmd/Ctrl your Smart Object and select Edit>Define 
Brush Preset. Now apply this to a new layer at 10% 
Opacity, with the Scattering parameter at 1,000%. 



I TECHNIQUE 



Set up your canvas 

Open a dark navy backdrop layer. 
Set your foreground colour to #364f7c 
then select Gradient Overlay from the 
Layer Styles options. Set Opacity at 30% 
and Scale at around 85%. Create a new 
Soft Light layer and choose a large blue 
(#364f7c) brush. Make sure that Pen 
Pressure is activated in the Brush Presets. 



Time to erase 


Next, apply a layer mask to this 
layer and erase halfway from the left. 
Reactivate your original shape layer and 
apply a Tiles-Smooth Pattern overlay (in 
Layer Styles) at 25% Opacity and 85% 
Scale. Use what you’ve learnt to create a 
new shape (see above) in the bottom-left 
corner of your design. 


Nail neon effects 



Shaping up 

Apply your brush to the edges of 
your image and add a layer mask. With 
this active, go to Lilter>Noise>Add 
Noise>Amount 11% to limit gradient 
banding. Select the Pen Shape tool and 
draw out a shape like above. The Ellipse 
shape tool has been added in the bottom- 
right corner, set to Combine Shapes. 


On the right path 

Set blending to Overlay and add a 


layer mask. Apply a 50% Opacity black-to- 
transparent gradient to the bottom-right of 
your shape twice. Cmd/Ctrl click your 
shape layer thumbnail, create a new layer, 
select the Paths panel and choose Make 
Work Path from selection. Cmd/Ctrl-click 
the path thumbnail to make a selection. 



Feather-light touch 


Duplicate your original shape layer 
and your last shape, reset both the 
blending modes to Normal, then delete 
any attached layer masks and layer styles. 
Place both new layers at the top of the 
stack, Cmd/Ctrl-click them and press Cmd/ 
Ctrl+E to merge. Now select the Leather 
Elliptical Marquee tool at Ipx size. 


07 On the button 


Next, select the right-hand side of 
your shape and add a layer mask, inverting 
this (Cmd/Ctrl+I). Drop the new layer’s 
Opacity to 20% with Pill at 35%. Create 
your button by selecting the Ellipse shape 
tool and activating the Path setting. Draw 
out your circular button on another new 
layer and open up the Paths panel. 



04 Add an outline 


Select a small hard orange brush 
and Ctrl-click your path, before choosing 
the Stroke Path option. Apply a #f47a20 
colour, with Opacity at 53%, Noise at 5%, 
Spread at 8%, Size at 16px and a Screen 
blend mode. Duplicate the outline layer, 
setting blending to Screen. Press Cmd/ 
Ctrl+U and drop the Hue to -180. 



A glowing finale 


Cmd/Ctrl-click your path, selecting 
Stroke Path, with a hard, hot orange brush. 
Edit your shape to taste with a layer mask. 
Now add a pale orange Screen blend 
mode Outer Glow at 55% Opacity and 7px 
Size. Lastly apply a white Screen blend 
mode Inner Glow at 25% Opacity, with the 
Choke set to 18% and Size to 6px. 
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Twitter is one of the most popular 
technologies this millennium and 
millions of users, designers, and 
programmers rely on its API. Things 
have changed, though, and the new 
rules are bound to affect you 


I n the past few years Twitter has exploded in 

popularity. One of the main reasons for this is how 
open the API is and Twitter’s focus on service, not 
creating products. This created an enormous 
opportunity for others to create and innovate. 

This innovation opened new markets and 
expanded demand. It was a great partnership: 
except Twitter was not making money. 

A bit of history here. Twitter (or twttr as it was 
originally called) was first built as an SMS 
communication platform; only later did it turn into a 
web-based product with simple APIs. Since a very large 
userbase of phones already existed that can only text, 
Twitter was often the only way to engage in social media 
without a computer. Keep in mind that this was before 
the iPhone and Android began their run to take over the 
phone market. 

When the web API was released, there was a flood of 
hobby programmers, just like yours truly, who could 


create a cool fun little app around twitter in a weekend. 
For example, during the South by Southwest conference 
in 2009, a fun game was created called Assassin that 
had people assigning targets and reporting hits on their 
targets, all through Twitter. So overnight I wrote a simple 
little program that created a webpage of players, targets 
and Xs over successful hits. This application had nothing 
to do with Twitter’s original mission, but because of the 
openness and simplicity of the 140 character length, fun 
little ideas like that were popping up seemingly every 
day. As Twitter grew, so did the API, and that sparked 
even more innovation, from allowing creatives to build 
Twitter tools or applications using Twitter data to do 
everything from creating superior Twitter web clients; to 
tracking disease vectors, to playing, to creating calendar 
and to-do lists, and integrating into other applications 
that use Twitter as part of a greater function, like 
integration with other social media feeds. But the times, 
they area-changing. 
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Figure 1: Design Guild from Twitter for displaying a tweet. 


Why do I care, and how will this 
affect me? 

Whether you’re a programmer, designer or a user, these 
changes will affect you. Clearly, as a programmer, you 
will have your hands full making changes to deal with 
greater OAuth requirements, small changes in how 
some API calls return data, and quite a few headaches if 
you did all your programming expecting XML to be 
returned instead of JSON. If you are a designer, you do 
not get off free either. Before 1.1 there were only 
recommendations as to how a tweet will be displayed; 
now it is a regulation. You will have to go back to your 
designs and Ul layouts and make sure you are 
compliant with the new rules. 

Finally as a user, you may or may not be affected 
depending on what Twitter tools you use and if your 
website uses Twitter information. You may wake up one 
day and find that your favourite old tools no longer 
work, or a feature in an app is no longer functional. It’s 
up to the app owners to decide if it’s worth spending 
development money to comply with all the changes in 
1.1. Many people may decide it’s not worth it, and on 5 
March, 2013, you may have lost your favourite app. 

Per-endpoint rate limiting 

In version 1.0 of the Twitter API, there was a 150 limit on 
the number of API calls you could make per hour that 
rose to 350. If you had a whitelisted application, that 
can be as much as 2,000 per hour. However, Twitter no 
longer supports whitelisting. Instead, Twitter has 
changed how it counts the API calls that are made to its 
service. Instead of the blanket 350 API calls, Twitter now 
has API buckets with different limits and most API calls 
set to 60 calls per hour. Twitter also changed the 
measure of how API calls are metered. Instead of every 
hour, the API measures every 15 minutes, so in this case 
60 calls an hour is 15 calls every 15 minutes. This 
change also limits API bursts. By forcing the client to 15 
calls per 15 minutes, demand on the system will be 
spread out over time, making life easier on the service. 
However, since per hour has been the standard since 
the early days, we will stay with that measure. 

This may sound like a step backwards, but it really 
isn’t for most app developers that have a niche market. 

Mcomment 


Remember the way it used to work is you would get 
350 calls per hour regardless of the API you are calling, 
so the downside is you can make quite a few calls 
depending on the sophistication of your application 
and what other information you want to gather besides 
just a tweet. Although many calls are limited to 60 an 
hour, high-volume calls related to tweet display, profile 
display, user lookup and user search will be able to 
make up to 720 calls per hour, per endpoint. 

As such, it’s very important to understand which calls 
are going to come out of which bucket. If you feel that 
your application is going to need to pull from the low 
bucket more than 60 times per hour, then you are 
going to need to get your application approved by 
Twitter. Once approved, you will have a larger pool of 
API calls. However, if you plan on consuming a lot of 
tweets, then you need to think about accessing the 
Twitter stream. 


60/hr Bucket 

001account/settings 
002account/verify_ 
credentials 
003direct_messages 
004friends/ids 
005geo/search 
statuses/mentions, 
timeline 

Table 1: The Bucket list abbreviated 


As we can see from Table 1 below, the small bucket has 
calls that normally would not be made that often, 
whereas the larger bucket would. However, this totally 
depends on the type of application you are writing. Say 
you want an app that only displays tweets within your 
area. Well, notice the GET geo/search API call is limited 
to 60 per hour. Thus, the only way your app is going to 
survive the 60 limit is to instead pull from the stream 
and sort it by Geo on your own. Further, if you have an 
application that monitors a brand or brands, you will 
run into this limitation as well since GET statuses/ 
mentions_timeline is also in the small bucket. In both 
cases you could try to access the steam and sort 
yourself, but you might want to try to get an exception 
from Twitter. Good luck with that if they feel your 
product can be a threat to them. 

This is not the only change however, even if you can 
manage to support your application's needs within the 
API call budget, there is another limitation. If you have 
an application that replicates the Twitter client, then you 
cannot have more than 100,000 access tokens, which 
is another way of saying you cannot support more than 
100,000 users. If you already have an application that 
has more than 100,000 users, then you will be limited a 
growth of 200 per cent of your current userbase. Again, 
this is only if you have or are building a Twitter client 
application that is accessing the home timeline, account 
settings or direct messages API. If you’re doing 
something completely different, like analysing tweets, 
you should be fine. For now. 

API changes for the designer 

So let’s say you have an application that does not hit 
the Twitter API that often, nor have near 100,000 users; 
don’t worry, there are changes in the API for you as well. 
These changes are more about policy then 
programming, and you’re not going to be happy. 

A major change with Twitter is the restriction of HOW 
you can display tweets. There are plenty of Twitter 
clients out there that have their own take on how 
Twitter information should be displayed, and how the 
user can interact with it. Odds are all of those apps and 
applications will see the end of the road in March 2013. 
Twitter is coming down hard on any client application 
that does not follow Twitters display guidelines, and 
since all API calls must be authenticated, they know 
who you are and can turn off the water at any time. The 
guidelines are pretty strict and do not provide much 




Dr Christopher Peri 

www.perivision.net 

I was lucky enough to sit in on a pitch of Twitter when it was still called twttr. I 
thought it would go nowhere because many people like me did not have 
unlimited text. Then came the web version, and later the API. I then started 
making all kinds of fun little Twitter programmes, a pretty sophisticated one 
called TwittFilter which I have for personal use, and even wrote a book on the 
Twitter API. After studying the coming changes, I may convert my code to 1.1, but 
that’s 50/50. I may still create fun little things in future, but I would never try to 
create any product or company that relies on Twitter. It's just too risky. 
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timeline 
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005users/search 

006users/show 
















Twitter is coming down hard on 
any client application that does not 
follow Twitters display guidelines. 


wiggle room. Let’s have a look at Figure 1 to the left, and 
then the high points... 

• Userjmentions must always link to the mentioned 
user’s profile 

• Hashtags must link to a twitter.com search with 
the hashtag as the query 

• Links in tweet text must be displayed using the 
display_url field in the URL entities API response, 
and link to the original t.co URL field 

• Reply, Retweet, and Favourite action icons must 
always be visible for the user to interact with the 
tweet. These actions must be implemented using 
Web Intents or with the authenticated Twitter API. 

As we can see from these first four points, Twitter wants 
to be sure that as many links as possible take the user 
back to Twitter. 

• No other social or third-party actions similar to 
Follow, Reply, Retweet and Favourite may be 
attached to a tweet 

• It must always be clear to the viewing user that 
they are looking at a tweet, and that the content is 
from Twitter 

• The Twitter logo or Follow button for the tweet 
author must always be displayed 

• The Twitter logo must link to Twitter. 

In the last four points we chose to highlight, Twitter want 
to make sure that core features are available so the user 


senses these functions have proven to improve the life 
of a Twitter thread. 

• Reply, Retweet and Favourite Tweet actions must 
always be available to the user when interacting 
with the tweet on the timeline, eg, select, hover, 
touch, swipe 

• For tweets that have been sent in the last 24 
hours, use the short-form timestamp relative to 
the current time, for example 20s for a Tweet sent 
20 seconds ago, 3m for three minutes ago, 5h for 
five hours ago 

• Tweets older than 24 hours should show a short- 
form date including the day and month, eg, 6 Jun 

• If the tweet being displayed is a retweet, the name 
of the user who retweeted it and the Retweet icon 
must be displayed under the tweet text - eg, 
Retweeted by Josh Brewer. The name should link 
to the retweeting user’s profile, unless your 
application is displaying tweets on a mobile 
platform that has clear physical or technical 
limitations that stop it doing this. 

The above four points show just how exacting Twitter 
wants information to be displayed and how the user is 
to interact with it. Flowever, the detailed outlines for how 
to display a date is beyond me. 

• Tweets that are grouped together into a timeline 
must not be rendered with non-Twitter content, 
eg, comments, updates from other networks. 


What is an API? 

We have all heard the term API, 
but what does it actually mean? 

An API, or Application Protocol Interface, is a 
protocol that computers use to exchange 
information with each other. In version 1.0 you 
could open a web browser and type api.twitter. 
com/1/statuses/public_timeline.xml in the URL 
field and get a reply. What we typed in is called a 
request. What we got back is the reply. The format 
of the request and reply is part of the protocol, or 
the API. So with our example, we could type the 
above line in a web browser or use it in code using 
a cURL call and get the following: 


001<?xml version=”l.0” encoding=”UTF-8”?> 

002<statuses 

003<status> 

004<created_at>Tue Apr 07 22:52:51 +0000 
2009</created_at> 

<id>1472669360</id> 

005<text>At least I can get your humor 
through tweets. RT @abdur: I don’t mean 
this in a bad way, but genetically 
speaking your a cul-de-sac.</text> 


However, in version 1.1, that same call will give you 
the following return: 


001<errors><error code=”34”>Sorry, that 
page does not exist</error></errors> 


In vl.O of the Twitter API developers can access 
some API endpoints without requiring 
authentication, essentially allowing anyone to grab 
data for any reason. Clearly this can get out of 
hand quite quickly. For example, there are many 
applications that are pulling data from the Twitter 
API at very high rates (scraping, bots, etc). To guard 
against this, Twitter is now requiring all API calls to 
be authenticated. 

As we mentioned, the Twitter API now requires 
that ALL requests must be verified. Twitter uses 
OAuth for this requirement when making API 
requests, and if you are already using OAuth 
authentication tokens then it should transition 
seamlessly from vl.O to vl.1. If you do not use 
OAuth this might sound like a big headache, but it 
really is not. There are plenty of libraries already 
out there that you can use to handle this for you in 
almost all common languages (dev.twitter.com/ 
docs/twitter-libraries). 

If this was the only change, we would not be 
having this conversation right now, but low and 
behold, there’s more. 
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Figure 2: Design guidelines from Twitter to display a stream of tweets 
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Figure 3: Twitter's view of the types of applications 
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Media integration Syndication 


BUSINESS 


This sector is 
aimed at the 
provider of tools 
that help engage 
with Twitter, like 
social CRM 
providers. 


Services that 
enable users to 
interact with 
tweets, especially 
those that‘mimic 
or reproduce the 
mainstream 
Twitter consumer 
client experience’. 
You do not want 
to be there. 


CONSUMER 


This sector is 
aimed at 
applications that 
serve the 
business market, 
with analytic 
products based 
on Twitter 
content. 
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Services that 
utilises Twitter 
content for social 
influence ranking, 
such as the 
popular Klout 
service. 


This last point we highlighted is important. Twitter is 
very keen to insure that when displaying a Twitter 
stream, all posts in that stream are shown as Twitter 
would like, and that is including sponsored posts, 
although that is not mentioned. 

Again, the list provided previously is just a few of the 
high points. The actual design specification goes into 
great detail and includes restrictions on what can go 
inside a tweet, how links must work, not putting any 
other links inside a tweet, and always making sure there 
is a Twitter logo somewhere near the display. If you have 
any thoughts of taking a tweet or stream of tweets and 
doing something even remotely interesting, or heck, 
anything at all, you will find both hands tied behind your 
back. And Twitter wants it this way. You may be asking 
yourself, ‘basically there is no room to experiment or 
innovate. Why would Twitter do this? Why indeed. 

Why on earth did Twitter make 
these changes? 

According to Twitter’s website, these changes have 
been enacted in order to make the system more stable, 
more secure, and the user experience more consistent. 
As stated, some of the changes with the API actually 
have nothing to do with the API at all, but instead have 
to do with the change of style recommendations to 
style requirements. So, what does this mean? 
Conspiracy theories aside, Twitter is essentially trying to 


gain better control of its product in order to better 
support and monetise in some way. And depending on 
where your product or a service you depend on falls in 
the aforementioned diagram, you could find that your 
application is no longer working quite as well as it once 
did with Twitter. 

As you can see in Figure 3 above, Twitter is trying to 
carve up the current Twitter market into what they have 
branded competitive and non-competitive segments. 

• On the left-hand side of the grid are applications 
that are targeted at businesses 

• In the lower-left quadrant, are apps and services 
that serve the business market, with analytics 
products based on Twitter content 

• In the upper-left quadrant are providers of tools 


that help businesses engage with Twitter, like 
social CRM providers 

• On the right-hand side of the grid are applications 
that are targeted at consumers. 

• In the lower-right quadrant are services that utilise 
Twitter content for social influence ranking, such 
as the popular Klout service 

• In the upper right-hand quadrant are services that 
enable users to interact with tweets, especially 
those that ‘mimic or reproduce the mainstream 
Twitter consumer client experience’. You do not 
want to be there. 

In this case, the traditional Twitter clients and 
syndication segment is considered completive while the 
rest are not... for now. The main reason for this is 


if Twitter was built up on the backs ^ 
of developers, and some apps are 
arguably a better use of Twitter for 
users than Twitter is itself if 
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twofold. First Twitter wants better control over where 
and how its content is displayed because, second, they 
need to make money. 

And there we get to the core. 

Changes to the API for performance, monitoring bots 
and in general making the system more robust are a 
needed and understood thing. If it was just about the 
API in itself, I’m not sure there would be a story here. 

But, by insisting on how third parties can display Twitter 
data and enforcing a growth limit so not any one 
product can become more popular than the Twitter 
client itself, indicates that they are doing all they can to 
maximise monetisation opportunities through the 
Twitter stream and on the Twitter client. 

There is only one problem with this. There are quite a 
few companies that have been building off the Twitter 
API, helping to make Twitter more useful, and thus 
grow, who are going to get cut off at the knees. There 
are three really nice quotes from a money.cnn.com 
post, (money.cnn.com/2012/08/23/technology/ 
twitter-api-tumblr/index.html). 

“They have a right to do what they want with their 
own API, but it changes what Twitter is about,” said Burt 
Herman, co-founder of social curation site Storify. 

“Twitter was built up on the backs of developers. And 
some apps are arguably a better use of Twitter for users 
than Twitter is itself.” 

"Even some of Twitter’s own employees are vocally 
displeased. This @tumblr business just stinks,' Twitter 
engineer Alex Choi tweeted." 

That confusion fuelled a post from Instapaper creator 
Marco Arment, who took to his influential blog to detail 
his take on the new guidelines. He had particularly 
harsh words for the 100,000-user limit before app 
makers require special permissions from Twitter. 

“Translation: ‘Once you get big enough for us to 
notice, we’re going to require you to adhere to more 
strict, unpublished rules to make sure you don’t 
compete with us or take too much value from our 
network,”’ Arment wrote. As you can gather from that 
little selection of opinions there, not everybody is happy 
with these changes. 


What does the Future hold? Will 
there be more changes? 


As you can probably ascertain by now, there are quite a 
few companies that have been basically handed their 

hat with the 
changes in the API, 
limits, and display 
guidelines. This will 
also continue to pour 
cold water on any new 
initiative to create 
innovative Twitter 
products - much less 
Twitter clients. This 
begs the questions; is 
Twitter abandoning its 
once-neutral stance? And 


what legal actions, if any, can already established 
companies take? The short answers are ‘Yes’ and 
‘None’. 

Twitter still needs to pay its bills. It has a nice new 
space in San Francisco, has hired lots of people, and 
spends a good chunk of money on servers. That is 
not free you know; not to mention investors who are 
waiting for their payback. 

The problem is how do you make money on 
Twitter? This has been an ongoing discussion for 
years, with the early answer of ‘we will build it first, 
and then worry about making money later.’ Well it’s 


later now, and plenty of companies have been doing 


If it was just about the Twitter 
API in itself, I’m not sure there 


would be much of a story here 



fine creating successful services on top of the 
Twitter ecosystem. 

The obvious revenue stream is through 
sponsored tweets and adverts on the Twitter web 
and mobile clients. Knowing they are pushing hard 
to funnel as many users through a controlled 
experience as possible explains pretty much most 
of the changes we have discussed, and as such, 
you can imagine that any changes needed in the 
future to further maximise this revenue stream will 
be entertained. This includes sacrificing a few 
companies on the way. 

The problem is that this laid-back approach has 
been going on for a long time. Too long. And now 
Twitter has very little choice but to close the doors 
on its once wide-open system in order to create 
revenues through adverts and special access - and 
if people get hurt, so be it. 

A general and valid concern out there is that if 
Twitter does not feel these current changes are 
enough to improve their bottom line, they may 
extend their reach even further into non-core 
markets. Taking lessons from Apple, they may 
decide that any company profiting from the Twitter 
service will be required to pay Twitter a percentage, 
or a licensing fee. Perhaps Twitter will decided the 
real money is in analytics and create a new rule that 
all current and future analytic products are deemed 
competitive and degrade their ability to compete 
with native Twitter products. Perhaps they will 
come out with their own iPod as well, but that 
might be looking too far down the Apple model. 

Regardless of whether you own a Twitter-based 
product, or you are a user that favours something 
other than the official Twitter clients for your tweets, 
you are going to feel the big chill come March 
2013. That is, unless, you are eaten in the Great 
Zombie Apocalypse at the end of 2012. But, that’s 
another story. 
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mobile app 

development 

Use the cloud-based PhoneGap 
Build service to streamline your 
development workflow and compile 
mobile applications 

tools I tech | trends Code editor, PhoneGap Build service 
export Matt Gifford 



S ince its emergence on the 
development market the 
PhoneGap API has proven to be a 
roaring success. With over 1 million 
downloads to date, it has opened 
up the doors for creative 
professionals to build mobile 
applications in the familiar coding 
languages of HTML, JavaScript, 
and CSS; removing the need to learn any of those native 
platform-specific languages. 

In this tutorial we will explore the PhoneGap Build cloud 
service, which will take the strain and stress out of 
manually compiling applications for each specific mobile 
platform by automatically generating the required native 
packages for us. Well see how we can hook in our code 
using a Git repository for easier code management, and 
how we can make use of debugging features and 
automatic application updates to test and deploy our 
application directly on the device. 


Build service account 

To begin, we will need to have an account with the PhoneGap Build 
Service, which is free and easy to set up. Head over to build.phonegap.com/ 
people/sign_up to begin the registration process. You can sign in using either 
an Adobe ID or your GitHub account details, so you will also need one of these 
if you do not already have one. 

Project template 

You may already have a PhoneGap project that you would like to use 
within the build service. If you do not, or are completely new to PhoneGap 
development, let’s download the PhoneGap Starter project from GitHub.com/ 
coldfumonkeh/phonegap-start. If you have a GitHub account, fork the project 
into your own repository for easier integration into the build service. 

001<body> 

002 <div class=”app”> 

003 <hl>PhoneGap</hl> 

004 <div id=”deviceready”> 

005 <p class=”status pending blink”> 

Connecting to Device</p> 

006 <p class=”status complete blink hide” 

007>Device is Ready</p> 

008 </div> 

09 </div> 

010 <script type=”text/javascript” src=”cordova. 
js”x/script> 

ell <script type=”text/javascript” src=”js/ 
index. 

012j s”x/script> 

013 <script type=”text/javascript”> 

014 app.initialize(); 

015 </script> 

</body> 


Import project 

Open the downloaded project in a text editor. Thanks to the versatility of 
the PhoneGap Build service, we are not tied to any specific coding software - as 
long as you can write HTML, JS and CSS, you can use whatever tool suits you 
best. The core application code exists within the WWW directory. 

Config.xml 

Open the config.xml in your editor. This file allows us to set the main 
attributes for our project, including icon and image data, the description, title 
and author details, as well as enabling access to device features. PhoneGap 
Build requires this file to properly process and create the packaged application 
ready for deployment. 

ConfiGAPtool 

The config.xml file contents and configurable attributes can be fairly 
in-depth and confusing. There are tools available to help you work with this file, 
including ConfiGAP, which is an AIR application. Download and install this 
application from the following URL to assist you in completing the configuration 
data to suit your needs. Open up the config.xml file we downloaded into the 
application and amend the values. 

NoCordova.js 

Open index.html in your code editor. One of the script tags references a 
version of the Cordova library. However, that file does not exist within the local 
project structure. If we wanted to test and emulate the application locally, we 
would need it, but the PhoneGap Build service will inject the required file on our 
behalf during the build process. 

Time to submit 

With the basic application created and the configuration details stored in 
the config.xml file, we are now able to submit our app to the build service. If this 
is your first time, you will be presented with the upload option box, from which 
you have the ability to upload the app as an open-source or private project. 
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• Download the PhoneGap starter project from GitHub to get a simple application 
structure ready for your use 
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The confiGAP tool is a helpful way to generate the config.xml file without writing XML 
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<2\foove> 

• The PhoneGap Build service is free to use, and registration is quick and easy 

<HELOW> 

• The config.xml file can be used to configure how your PhoneGap Build 
project compiles 


Private options 

The private option gives you a little more privacy over your submitted 
application and how you can submit it. You can use any Git repository (GitHub 
or your own private repos), or you can upload the application files as an 
archived ZIP file. For this tutorial we will use the repository option and paste the 
URL directly into the provided address bar. 

Project imported 

The PhoneGap Build service will automatically clone the code within the 
provided Git repository and import the application. It has automatically been 
assigned an App ID numeric identifier, and the core details from the config.xml 
file have also been referenced, including the version of PhoneGap to compile 
against, as well as the owner’s name. Click Ready to build the first compile. 

Build process 

The build service will now start to compile the submitted mobile 
application for the six key platforms it currently supports. The user interface 
provides an easy to read real-time notification of any failures or issues that may 


arise during this process. Here, no iOS signing key was provided, so the build for 
that platform was unable to finish. 

Available settings 

Clicking on the application title will take you through to the individual 
app page. From here you can see the latest build information and how long it 
took, as well as the ability to add a new collaborator to the project, which is ideal 
for development teams and enhanced workflow. 

Enable hydration 

One incredible feature of the build service is the Hydration facility. Under 
the Settings tab, click the Enable Debugging and Enable Hydration options. 
Hydration will rebuild the native compiled code into a new binary format to 
assist with easier development and deployment to devices used for testing. 

Install application 

To see the Hydration features we enabled in the previous step in action, 
install the compiled application onto your mobile device. You can do this by 
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The PhoneGap Build API 

For any developers who really 
enjoy rolling their own workflow, 
PhoneGap Build services are 
exposed as an API, which 
you can integrate into 
your own processes. 
build.phonegap.com 
/docs/api. 


either downloading the raw, platform-specific, package file, or instead by 
using your device’s camera to scan the unique QR code generated by 
the PhoneGap Build service. Doing this will download the file directly 
onto the device. 

Update code 

With the Hydrated application installed on the device, let’s now update 
our application code and commit it to the repository. Run a simple test to 
change the default text on the home screen. Once committed to the repository, 
head back to the PhoneGap Build settings panel and click the Pull Latest button 
to grab the latest code. 


Retrieve build 

Once the code has recompiled, open the application that is currently 
installed on your device. As the Hydration feature is enabled, it will detect 
whether an updated version of the compiled app is available, and ask if you 
would like to download and install directly to the device wirelessly. This really 
is a big timesaver! 

Remote debugging 

Remote debugging and element inspection is powered by the 
open-source weinre project (Web Inspector Remote). With the application 
running on your device, select the debug button in the build service, which will 
open an instance of debug.phonegap.com with a unique UUID in the URL. You 
should see your device listed here. 

Mobile inspection 

Weinre should be familiar to anyone who has used tools such as Firebug 
or Chrome developer tools. With the connection open, you can view console 
output, change the element content and styles and even send test JavaScript 
alerts directly to your mobile application. This is ideal for testing changes 
directly on the device. 
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/ Web Inspector x 
r Remote 

Weinre is a really useful, 
powerful, remote debugging 
and inspection tool, built by 
Patrick Mueller. Find out more 
about it here: people.apache. 

org/~pmuellr/weinre/ 

L docs/1 .x/1.5.0. 



Code library 

In Detail 

The config.xml file is a required component for the PhoneGap Build service. 


The author details, 
description, application 
id and version number 
are all properties the 
Build service requires. 


This new block shows 
that preferences are 
optional, and will use 
default values if not 
submitted. Features 
specify which API 
methods to use in 
your application. 


Splash images are 
optional, but specific in 
dimensions and file 
names to each mobile 
operating system. 


001<?xml version=”1.0” encoding=”UTF-8”?> 
002<widget id=”com.coldfumonkeh.killerapp” 
version=”l.0.1” versionCode=”” 
003xmlns=”http://www.w3.org/ns/widgets” 

004 xmlns:gap=”http://phonegap.com/ns/1.0”> 
005 <name>My Killer Application</name> 
<description> 

006 This will earn me mega $$$$ 

007 </description> 

008 <author email=”me@mattgifford.co.uk” 
href=”http://www.mattgifford.co.uk”> 

009 Matt Gifford </author> 

001<preference name=”phonegap-version” 
value-’2.1.0”/> 

002<preference name=”orientation” 
value=”default”/> 

003<preference name-’target-device” 
value-’universal”/> 

004<preference name=”fullscreen” 
value=”true”/> 

005<preference name=”webviewbounce” 
value=”true”/> 

006<feature name-’http://api.phonegap.com/1.0/ 
battery”/> 

006<feature name=”http://api.phonegap.com/1.0/ 
camera”/> 

007<feature name=”http://api.phonegap.com/1.0/ 
contacts”/> 

008<feature name-’http://api.phonegap.com/1.0 
/device”/> 

001<gap:splash gap:platform=”ios” height=”480” 
002src=”splash/ios/Default.png” width=”320”/> 
003<gap:splash gap:platform=”ios” height=”960” 
004src=”splash/ios/Default_at_2x.png” 
005width=”640”/> 

006<gap:splash gap:platform=”ios” height=”768” 
007src=”splash/ios/Default-Landscape.png” 
with-’1024”/> 

008<gap:splash gap:density=”ldpi” 

009gap:platform=”android” src=”splash/android/ 
ldpi.png”/> 

010<gap:splash gap:density=”mdpi” 

011gap:platform=”android” src=”splash/android/ 
mdpi.png”/> 

012<gap:splash gap:density=”hdpi” 

013gap:platform=”android” src=”splash/ 
android/ hdpi.png”/> 

014<gap:splash gap:density=”xhdpi” 

015gap:platform=”android” src=”splash/android/ 
xhdpi.png”/> 

016<gap:splash gap:platform=”blackberry” 
src=”splash/bb/splash.png”/> 
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Make websites 
efficient with 
Page Visibility 

Learn a few techniques to create a 
responsive website that efficiently 
handles being out of sight with the 
power-saving Page Visibility API 

tools I tecli I fronds HTML, jQuery, JavaScript text editor. Page Visibility 
export Tim Stone 



W e’ve had tabbed browsing 
for about a decade. Most 
users are familiar with the 
idea of having more than 
one website open at a time, 
but it’s hard to deduce when 
your site has their attention. 
Traditional ‘hacks’ are to 
attach an onblur or onfocus 
listener, but these are far 
from flawless as they often give false positives. 

Enter the Page Visibility API. Although this JS API is 
still in its infancy, it’s ‘a means for site developers to 
programmatically determine the current visibility state 
of the page in order to develop power and CPU-efficient 
web applications’. It’s currently a W3C Candidate 
Recommendation which has been championed by 
Microsoft and Google, so it’s not surprising to find it’s 
supported in Chrome 13 and will be supported in IE10, 
as well as Firefox 10 and Opera 12.10. In this tutorial we’ll 
pause and play a video; prevent erroneous visits being 
added to page analytics; and stop Ajax requests until 
the user returns, saving greatly on server load. 


Adding the listener 

It’s incredibly easy to start using the Page Visibility API; if you’ve ever 
added a click handler this syntax will look very familiar. The visibilitychange 
event is triggered by several actions: when a user navigates to/from the tab 
your site is in, when the browser is minimised and when the OS is locked. 


001 document.addEventListener( 'visibilitychange', function() { 

002 //do stuff 

003 }, false); 

004 /* jQuery way */ 

005 $(document).on( 'visibilitychange', function() { 

006 //do stuff 

007 }); 

Catering for all browsers 

Of course, this wouldn’t be web development if it were that easy. 
Currently, most of the browsers that support the Page Visibility API do so with 
their own vendor prefix (except Opera). To account for this we can quickly 
check if the prefixed version is undefined or not. 

001 var prefix; 

002 if ( typeof document.hidden !== 'undefined' ) { 

003 prefix = ''; 

004 } else if ( typeof document.webkitHidden !== 'undefined' ) { 

005 prefix = 'webkit'; 

006 } else if ( typeof document.mozHidden !== 'undefined' ) { 

007 prefix = 'moz'; 

008 } else if ( typeof document.msHidden !== 'undefined' ) { 

009 prefix = 'ms'; 

010 } else { 


011 window.alert( 'Your browser doesnVt support the Page 
Visibility API’); 

012 return; 


013 } 


Helping ourselves 


Right, we’ve now determined if the browser supports the API and 
which vendor prefix to use. To use this data though, we need to check the 
Boolean value of document.hidden. We could check for each prefix like if 
(document.hidden II document.webkitHidden II, etc), but that could quickly get 
tiring for our fingers. Instead, we’ve written a function to prevent RSI. 


001 function isHidden() { 

002 if ( prefix === '' || typeof document.hidden !== 

'undefined' ) { 

003 return document.hidden; 

004 } else if ( prefix === 'webkit' || typeof document. 

webkitHidden !== 'undefined' ) { 

005 return document.webkitHidden; 

006 } else if ( prefix === 'moz' || typeof document.mozHidden 

!== 'undefined' ) { 

007 return document.mozHidden; 

008 } else if ( prefix === 'ms' || typeof document.msHidden !== 

'undefined' ) { 

009 return document.msHidden; 

010 } else { 

011 return null; 

012 } 

013 } 


The universal approach 

With that in place we can simply call that function to determine the 
page’s visibility. You’ll probably notice that we have explicitly checked if hidden 
is false as opposed to the shorthand lisHiddenO because that would evaluate 
as true if isHiddenO returned null. 


001 document.addEventListener( prefix 


function(event) { 


002 if ( isHidden() ) { 


'visibilitychange', 
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003 

} else if ( isHidden() === false) { 

004 

} 

005 

}, false); 


05 Video HTML 


Now we’re starting to get to grips with the Page Visibility API it’s time to 
do something with it. To kick off, we’re going to be pausing and playing a 
video when the user visits a different tab. We’ll start by writing the HTML for 
the video and include the visibility.js script. 


001 <video width="550" height="360" controls autoplay> 

002 <source src="my-video.webm'' type=''video/webm; 
codecs=’vp8.0, vorbis”’> 

003 <source src="my-video.mp4" type="video/mp4; 
codecs=’avcl.4D401E, mp4a.40.2’"> 

004 <source src="my-video.ogv" type='video/ogg; codecs="theora 
vorbis"’> 

005 <p>Your browser can't play this video :(</p> 

006 </video> 

007 <script src=”visibility. js"x/script> 


Controlling the video 

HTML5 video allows us to control its playback with JavaScript through 
its own very simple API. We’re going to be using two of its methods: playO and 
paused To use these we need to lock on to the video’s node; this assumes it’s 
the only video element on the page by getting the first in the list. 


001 var video = document.getElementsByTagName('video')[0]; 
002 document.addEventListener( prefix + 'visibilitychange', 
function(event) { 

003 if ( isHidden() ) { 


004 

video.pause(); 

005 

} else if ( isHidden() === false ) { 

006 

video.play(); 

007 } 

008 }, false); 


Pause for a moment 


This has the desired effect! Marvel as you never miss a frame of video 
playback again. Unfortunately, our implementation will pause and start it even 
if the video has already been watched or was paused by the user. To get 
around this we are going to check if the video is paused at the point they 
navigate away from the page. 


001 if ( isHidden() ) { 

002 paused = video.paused; 
003 video.pause(); 

004 } 


Play it again... 


In the previous step we used a property called paused to check if the 
video was stopped; we’re now going to use some other properties specific to 
the video tag to make an educated guess as to whether the video should be 
played when the user navigates back to our site. 


1 if ( video.currentTime > 0 && !paused && !video.ended ) { 
002 video.play(); 

3 > 


Let’s recap 

Great! We should now have a video that only plays if it was playing, 
wasn’t paused and hasn’t ended. This is a good example of progressive 
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Speed Dial 
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<Top left, clock wise> 

• You probably have better things to do with requests than simply output 
This was a triumph’, but whatever the message, the code is the same 

• Amaze (or annoy) your users by telling them to close your tab by 
changing the page’s title after a set time 

• To visualise Ajax requests the counter increases for every request made 

• The tab preview shows it has still only made one request 

• Once we go back to the tab, it starts to make requests again 


enhancement where - if the technology is available - we can add extra levels 
of functionality to make users’ lives a little easier. 

Visibility state 

As well as document.hidden the Page Visibility API also adds another 
attribute: document.visibilityState. This has four possible values: visible, hidden, 
unloaded and prerender. Like hidden, it’s currently vendor prefixed so let’s first 
make a similar function to isHiddenO that deals with this. 


001 function visibilityStateQ { 

002 

if ( prefix === ’’ || typeof document.hidden 

!==Vundefined’ ) { 

003 

return document.visibilityState; 

004 

} else if ( prefix === ’webkit’ || typeof document. 

webkitHidden !== ’undefined’ ) { 

005 

return document.webkitVisibilityState; 

006 

} else if ( prefix === ’moz’ || typeof document.mozHidden 

!== ’undefined’ ) { 

007 

return document.mozVisibilityState; 

008 

} else if ( prefix === ’ms’ || typeof document.msHidden !== 

’undefined’ ) { 

009 

return document.msVisibilityState; 

010 

} else { 

0u 

return null; 

012 

} 

013 } 


Verifying analytics 

When looking at visibilityState the first two values make sense, but 
prerender is a bit weirder. Some browsers (such as Chrome) pre-render pages 
that they think the user will click on to speed up browsing. Because this 
counts as a page view it can skew analytics into thinking they’re getting more 
views than they really are. We can fix this with the Page Visibility API. 

001 if ( visibilityStateQ !== ’prerender’ ) { 


Power-efficient 
web development 

The Page Visibility API could be 
used in conjunction with the 
Battery API (http://tinyurl.com/ 
batteryapi) to reduce site 
functionality when a 
device is running low 
on power. 


002 //your analytics code 


003 } 


How long? 

” You might also find it useful to work out how long a user has been away 
from your website - either for analytics or to modify an element of your page in 
some way. When the visibilitychange event is fired it gives us a number of 
properties - one of which is the timestamp for when the event occurred. 


001 if ( isHidden() ) { 


002 timeAway = new Date(event.timeStamp); 


003 } 


We missed you... 

We’ve used JavaScript’s built-in Date object so that we can work with 
the UNIX timestamp. To calculate how long they were away we can simply 
subtract one date from the other. We’re also dividing it by 1,000 to convert 
milliseconds to seconds and rounding the result up to make it more readable. 

001 } else if ( isHidden() === false ) { 

002 var delta = new Date(event.timeStamp) - timeAway; 

003 window.alert(’You were away for ’ + Math.round(delta / 


seconds’); 


004 } 
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Changing the title 

This only fires when they leave and come back, but what if you want to 
do something on your site once the user has been away for a certain amount 
of time? We can use setlntervalO to check how long they’ve been gone. If the 
user is away for, say, ten minutes, we change the title to ‘Close me!’. 


001 setInterval(function() { 


002 var delta = Date.nowQ - timeAway; 


003 if ( delta > 600000 ) { 

004 document.title = 'Close me!' 
005 clearlnterval( this ); 


006 } 

007 }, 10000); 


Reverting the title 

Once they come back, we want to change the title back to what it was; 
you can do this with a simple if statement. It’s worth noting that just because 
we can do things like this it doesn’t mean we necessarily should. Adding a 
setlnterval when a page isn’t being viewed is extra load on the CPU, but on the 
other hand, it does offer developers some extra creativity. 


001 } else if ( isHidden() === false ) { 


002 if (document.title !== 'Page Visibility API tutorial') { 


003 document.title = 'Page Visibility API tutorial’ 


004 } 


005 } 


Turning to Ajax 

Okay, so the last example was a bit gimmicky - it’s unlikely many web 
developers are going to start encouraging people to close their page after 
they’ve been gone for ten minutes! Perhaps a more useful application of the 
Page Visibility API is to stop Ajax requests when they’re not needed. 


001 var requests = [], 


002 makeRequests; 


003 function getSomething() { 
004 } 


005function stopRequestsO { 


> 


This was a triumph 

The requests variable is going to store all requests (ideally you’d 
remove requests once they’ve been completed). We’re going to use jQuery’s 
ajax method for its simplicity. Within the getSomethingO function, add: 


001 var request = $.ajax({ 


002 url: ' HYPERLINK "http://lab.fetimo.com/pagevis/resource. 


json”’ http://mysite.com/resource.json’, 


003 success: function(response) { 


004 $('body').append(response.message + '<br>'); 

005 } 

006 }); 

007 requests.push(request); 

Cancel that 

jQuery has a handy property called beforeSend on its ajax method 
which lets you - among other things - set custom headers and, ultimately, 
decide if the request should be made. We’ll use this to only send a request if 
the page is visible by returning false if the page is hidden; returning false stops 
the request from being made. 


001 request = $.ajax({ 

002 

beforeSend: function() { 

003 

if ( isHidden() ) { 

004 

stopRequestsO; 

005 

return false; 

006 

} 

007 }, 


Setting intervals 

To simulate an Ajax-style application making many requests we’ll set 
up a setlnterval to make a request every second within getSomethingO. We 
assign it to a variable so that we can clear it in the next step - otherwise it 
would be making requests for ever! We also don’t want multiple timers, so it 
has been wrapped in an if statement. 


001 if ( !makeRequests ) { 


002 makeRequests = setInterval(function() { 


003 getSomethingO; 
004 }, 1000); 

005 } 


Abort! 

Next, we’ll write what stopRequestsO is meant to do. We will loop 
through the array and use jQuery’s abortO function on each of the active 
connections. We’ll then clear the interval that emulates an application making 
requests for us and reset the variable to be undefined; if we didn’t do this it 
would remain as the ID of the setlnterval. 


001 requests.forEach(function( request ) { 


002 request.abort(); 


003 }); 


004 clearlnterval( makeRequests ); 


005 makeRequests = undefined; 


Initialise requests 

The last thing to do is initialise getSomethingO to start making requests 
both when the page is visible and on initial page load. This will complete 
emulating a JavaScript app making requests so that we can see the effect of 
our dabbling with the Page Visibility API. 


001 } else if ( isHidden() === false ) { 


002 getSomethingO; 


003 } 


004 }, false); //close event listener 


005 getSomethingO; 



Tidying up 

Now that we know this works you can change the requests array from 
storing every request made to just active ones by removing them on request 
completion. If you know you only ever make one request at a time you can 
simply do request.popO; however, here we’re going to compare each element 
in the array and see if it’s exactly the same as the variable in memory. 

001 complete: functionQ { 


002 requests.forEach(function( req, i ) { 


003 


004 

005 

006 


if ( req === request ) { 
requests.splice( i, 1 ); 

} 


}); 


007 } 
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Championing the talents of 


Patrick Cho 

web www.patrickcho.com 



Current role Digital art director 
Education BS in Business Administration 


Expertise Web design, art direction, UX, HTML, WordPress, 
digital strategy, CSS, social media, eCommerce 
Clients Nestle Butterfinger, Hot Pockets, Disney, Nestle 
Waters, San Diego Visitors Bureau, Rachael Ray 
and Heineken 


Twitter @patrickcho 


Patrick is a Los Angeles-based interactive 
designer and art director with a focus on UX 
and social. While initially pursuing business 
and marketing, he guickly discovered that a 
creative path in the digital space was more 
intriguing and fulfilling because it combined 
the three things he loved most: design 
(creating), technology (building) and strategy 
(smart problem solving). Studying from the 
‘school of hard knocks’, Patrick has taught 
himself how to design and code websites and 
has since worked with ad agencies on notable 
clients including Nestle and Disney. 

What he loves most about web design is the 
ability to make the internet beautiful. He 
believes a web designer has the responsibility 
to not only create captivating experiences but 


to ultimately enrich someone’s life. “Design 
can impact and connect people,” he says. “It is 
an extremely powerful tool that can effectively 
communicate an idea or message and can 
better the lives of people and culture.” What 
truly inspires him to become a better designer 
is witnessing the incredible influence of design 
and seeing the potential of social impact it can 
bring (such as the Pepsi Refresh Project). 

Today, Patrick thinks people are maturing in 
the way that they interact with the web. They 
are getting smarter and expecting better user 
experiences, which is why things like 
responsive design are becoming a standard 
rather than a trend. Patrick believes it is an 
exciting time for web designers and he’s very 
pleased to be part of this industry. 
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01 

San Diego’s official visitor portal 
reflects the fun and sunny 
destination through vibrant 
imagery, engaging content and a 
series of interactive maps. 


02 

Patrick’s portfolio site mimics a 
Photoshop-like interface with 
elements like fake text areas, 
rulers, cyan grid lines, objects in 
bounding boxes and more. 


03 

Highly anticipated fantasy LOTR 
game site showcasing beautiful 
key art and detailed, ‘pseudo- 
medieval’ design elements 
displayed on a clean layout. 


04 

A simple and elegant site with 
progressive, image-rich design, 
focused on vibrant photography 
and simplified UX through a 
streamlined navigation. 


05 

This site features a rotating image 
carousel that allows the brand to 
showcase new promotions and 
offers a way for consumers to 
learn about the healthy products. 
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Justin Woods 

web www.woodswoodswoods.com 



Current role Freelance creative 
Education BA in Studio Art 

Expertise Interactive art direction, web & Ul design, branding, 
user experience, Photoshop, CSS and jQuery 
Clients EA, Burger King, Sony, Herman Miller, TaylorMade 
and simplehuman 
Twitter @jsw0984 


Justin is a full-time freelance designer with 
over six years’ industry experience. He has 

previously lived in Miami, Florida, and Los 
Angeles, California, where he has worked with a 
variety of successful agencies including BGT 
Partners, Real Pie Media, FRANK Worldwide 
and Hello Design. He is currently based in 
Mountain View, California, which is situated in 
Silicon Valley - home to many of the world’s 
largest technology corporations but also to 
thousands of small startups. 

Justin specialises in web and user interface 
design. He loves focusing on pixel-perfect 
details and treating each design component 
with its own well-deserved attention. Evident in 
much of his work is a clean, corporate and 
ostensibly minimalist style. “I love taking 
something seemingly complex and creating 
the illusion of natural simplicity,” Justin says. 


His inspiration comes from well-recognised 
digital agencies such as Odopod, Fantasy 
Interactive and Struck Axiom. Despite having 
studied studio art and obtained a university 
degree in the subject, Justin believes that by far 
the most significant contribution to his 
education came from industry experience and 
through the mentorship of other incredibly 
talented designers. 

He hopes to keep pushing the limits of 
creativity and stay ahead of the design curve. “It 
is a fast-paced industry that is constantly 
evolving,” he tells us. He enjoys taking on 
projects that he finds inspiring, challenging and 
those that allow him to make a difference to 
people’s lives. Justin has been fortunate enough 
to work with a number of well-recognised 
brands including EA, Burger King, Sony and 
Herman Miller to name just a few. 
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01 

Built on Secretary CMS, Justin’s 
visually captivating portfolio site 
brings together a tasteful mix of 
Ajax, HTML5, jQuery, CSS3 and 
responsive design. 


02 

The client reguested an online 
presence with a clean, modern 
and slightly boutigue style. They 
also wanted to place emphasis 
on the Just in’ section. 


03 

LOT323 was a product in a 
network of venture startups, 
mixing daily fashion deals with 
celebrity style. The design uses 
guality photos in a fluid layout. 


04 

Working with Hello Design, Justin 
helped to produce promotional 
designs for iconic furniture 
maker Herman Miller. This 
landing page is one example. 


05 

Intended as an experimental and 
unigue UX concept to unlock a 
smartphone, this design pays 
homage to the old-school 
Nintendo gamer era. 
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Web talent showcase 



Evan Richards 


web byassociationonly.com 



Currentrole Founder of By Association Only 
Education Undergraduate degree 
Expertise Web design and development mobile and app 
design, brand design 

Clients MASC, Hester Browne, Historic Royal Palaces 
and Into Sport Group 
Twitter @ByAssocOnly 


By Association Only (BAO) is an award-winning 
web design agency with offices in Hereford 
and Cambridge, England. They produce 
eCommerce and brochure websites, iPhone 
apps, branding solutions, social media and 
marketing strategies for an array of businesses. 

Recently, BAO has been extremely busy 
launching websites for bestselling New York 
Times authors, internationally recognised fashion 
brands and renowned creative agencies. The 
team has also just about managed to sgueeze in 
enough time to co-partner an extremely exciting 
conference titled Another Marketing Conference, 
attracting top speakers from Google, Aurasma 
and The Guardian to name but a few. 


The variety is what really inspires By 
Association Only; working with such diverse 
clients from all manner of backgrounds provides 
day-to-day challenges that most other industries 
simply couldn’t offer. 

One day BAO could be working on a detailed 
and complex user interface, the next it could be 
coding up a unigue WordPress theme or 
tweaking a webpage or two with the aim of 
increasing conversion rates. From responsive 
design to visually enhancing webpages with 
CSS3 and jQuery, the web is changing and 
providing ever more possibilities that allow Evan 
and the other BAO creatives to push the 
boundaries with every client they work with. 



O! bvassociationonlv.com 


01 

This responsive fashion website 
had to focus on the garments 
MASC wanted to showcase. This 
was easy as the client supplied 
extremely high-quality imagery. 


02 

This bright design for the Another 
Marketing Conference ensures 
that all the key services are 
displayed to give the visitor 
instant access to the vital info. 


03 

Built on Umbraco using 
uCommerce, By Association 
Only had to create an eShop 
enabling customers to order a 
bespoke pair of trousers. 


04 

The standard of author websites 
is generally quite poor so it was 
BAO’s job to create an inspired 
design on WordPress based 
around the ‘chick-lit’ genre. 


05 

The By Assoication Only home page 
makes clever use of background 
images. Scrolling down reveals a 
static background which disappears 
as the user keeps scrolling 
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Subscribe now and get 

'5 ISSUES FREE* 


The only magazine you need to design and develop stunning websites 



Subscribe now 

?• Online 

Order by visiting: 

www.imaginesubs.co.uk/wed 

and enter USA to get this exclusive offer! 

* Telephone 

Order by phone, just call: 

+44 (0) 1795 592 878 

and quote USA 


TERMS & CONDITIONS 

*This is a US subscription offer; please don’t forget to quote USA when 
ordering. You will actually be charged £80 sterling for an annual 
subscription. This is equivalent to $126 at the time of writing, although 
the exchange rate may vary. Five free issues refers to the newsstand 
price of $14.99 for 13 issues totalling $194.87 compared with $126 for a 
subscription. Your subscription will start from the next available issue. 
Latest offer is based on newsstand price of $14.99 per issue compared 
with $9.69 through this offer. 

This offer expires 31 March 2013. 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 

•Unlimited websites • Use your own brand throughout 
•Unlimited bandwidth • 24/7 expert UK-based support 
•Unlimited web space • No-risk trial - 3 months free 


I Hosting listings 




Got a deal 
you think we 
should list? 


Whether you’re a hosting firm keen to promote your 
products or a happy customer who wants a favourite 
provider to be listed, drop us a line with the details! 

| webdesigner@imagine-publishing.co.uk 

^Jam^nchjr^ 


Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 



l&i 


1&1 Internet Ltd 

www.1and1.co.uk 


1&1 Starter (Linux) 

08443351211 

£29.88 

5GB 

Unlimited 

1,000 

/ 

X 

/ 

/ 

/ 

/ 

/ 

X 

1&1 Standard (Linux) 

0844 3351211 

£59.88 

50GB 

Unlimited 

3,000 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

1&1 Standard (Windows) 

0844 3351211 

£71.88 

50GB 

Unlimited 

3,000 

/ 

X 

/ 

/ 

/ 

/ 

/ 

X 

1&1 Unlimited (Linux) 

0844 3351211 

£83.88 

Unlimited 

Unlimited 

5,000 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

1&1 Unlimited (Windows) 

0844 3351211 

£107.88 

Unlimited 

Unlimited 

5,000 

/ 

X 

/ 

/ 

/ 

/ 

/ 

X 

1&1 Business (Linux) 

08443351211 

£119.88 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

1&1 Business (Windows) 

08443351211 

£155.88 

Unlimited 

Unlimited 

Unlimited 

/ 

X 

/ 

/ 

/ 

/ 

/ 

X 


lllWebHost 


111WebHost.COm Unlimited Web Hosting Pack N/A 

http://111webhOSt.com starter Web Hosting Pack N/A 

Budget Web Hosting Pack N/A 

WordPress Web Hosting Pack N/A 
Drupal Web Hosting Pack N/A 
Joomla! Web Hosting Pack N/A 
osCommerce Web Hosting Pack N/A 
ZenCart Web Hosting Pack N/A 
PrestaShop Web Hosting Pack N/A 


£60 Unlimited Unlimited Unlimited / 


£30 

£12 

£24 

£24 

£24 

£24 

£24 

£24 


5GB 

1GB 

5GB 

5GB 

5GB 

5GB 

5GB 

5GB 


2GB 

1GB 

2GB 

2GB 

2GB 

2GB 

2GB 

2GB 


100 

5 

100 

100 

100 

100 

100 

100 


/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


123-reg (www.123-reg.co.uk) 

Starter 

0845 859 0018 

£29.88 

1GB 

5GB 

20 




y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Plus 

0845 859 0018 

£59.88 

5GB 

50GB 

500 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Pro 

0845 859 0018 

£107.88 

10GB 

100GB 

750 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Bus Pro 

0845 859 0018 

£179.88 

20GB 

Unlimited 

1,000 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Plus (MS) 

0845 859 0018 

£59.88 

2GB 

25GB 

100 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Pro (MS) 

0845 859 0018 

£107.88 

5GB 

50GB 

500 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Bus Pro (MS) 

0845 859 0018 

£179.88 

10GB 

150GB 

1,000 

/ 



y 

y 

y 

y 


2020Media (www.2020media.com) 

Light User 

0870 321 2020 

£45 

20MB 

1GB 

3 

/ 

y 

y 

y 

y 

y 

y 


2020Media (www.2020media.com) 

Everyday 

0870 321 2020 

£100 

200MB 

10GB 

15 

/ 

y 

y 

y 

y 

y 

y 


2020Media (www.2020media.com) 

Business/Pro 

0870 321 2020 

£275 

500MB 

20GB 

50 

y 

y 

y 

y 

y 

y 

y 


2020Media (www.2020media.com) 

JAVA Tomcat 

0870 321 2020 

£300 

100MB 

3GB 

15 

y 

y 

y 

y 

y 

y 

y 


2020Media (www.2020media.com) 

ASP.Net 

0870 321 2020 

£275 

100MB 

3GB 

15 

y 

y 

y 

y 

y 

y 

y 


4D Data Centres (www.4dhosting.com) 

Bronze Package 

08451668386 

£40 

10MB 

500MB 

2 

y 


y 

y 

y 

y 

y 


4D Data Centres (www.4dhosting.com) 

Silver Package 

08451668386 

£64.99 

20MB 

2GB 

10 

y 


y 

y 

y 

y 

y 


4D Data Centres (www.4dhosting.com) 

Gold Package 

08451668386 

£79.99 

50MB 

2GB 

50 

/ 


y 

y 

y 

y 

y 


4D Data Centres (www.4dhosting.com) 

Titanium Package 

08451668386 

£149.99 

500MB 

5GB 

500 

y 


y 

y 

y 

y 

y 

y 

4D Data Centres (www.4dhosting.com) 

Reseller Package 

08451668386 

£299.99 

1GB 

10GB 

1,000 

y 


y 

y 

y 

y 

y 

y 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Home 

N/A 

£40 

500MB 

5GB 

5 

y 

y 

y 

y 


y 

y 


Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Business 

N/A 

£50 

1GB 

20GB 

100 

y 

y 

y 

y 


y 

y 


Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

eCommerce 

N/A 

£100 

2GB 

40GB 

200 

y 

y 

y 

y 


y 

y 


Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Professional 

N/A 

£150 

3GB 

60GB 

300 

y 

y 

y 

y 


y 

y 


Blacknight (www.blacknight.com) 

Minimus 

35359 918 3072 

£45 

10GB 

200GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 


Blacknight (www.blacknight.com) 

Medius 

35359 918 3072 

£79 

20GB 

400GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 


Blacknight (www.blacknight.com) 

Maximus 

35359 918 3072 

£45 

30GB 

600GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 


Bravo14 (http://bravo14.co.uk) 

Starter Linux 

N/A 

£130 

2,000MB 

2,000MB 

10 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Starter Windows 

N/A 

£20 

2,000MB 

2,000MB 

10 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Business Linux 

N/A 

£45 

4,000MB 

4,000MB 

4,000 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Business Windows 

N/A 

£45 

4,000MB 

4,000MB 

4,000 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Ultimate Linux 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Ultimate Windows 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 

y 

y 


y 

y 

y 

Daily Internet (www.daily.co.uk) 

Entry 

0845 466 2100 

£19.28 

500MB 

5GB 

75 

y 


y 


y 

y 

y 


Daily Internet (www.daily.co.uk) 

Home 

0845 466 2100 

£50.90 

3GB 

30GB 

30 

y 

y 

y 


y 

y 

y 


Daily Internet (www.daily.co.uk) 

Business 

0845 466 2100 

£53.94 

12GB 

150GB 

600 

y 

y 

y 


y 

y 

y 


Daily Internet (www.daily.co.uk) 

Business Plus 

0845 466 2100 

£77.94 

24GB 

250GB 

Unlimited 

y 

y 

y 


y 

y 

y 


Designwasp (http://designwasp.com) 

Starter 

0844 372 9848 

£30 

3GB 

20GB 

1,000 

y 

y 


y 


y 

y 


Designwasp (http://designwasp.com) 

Home 

0844 372 9848 

£40 

10GB 

50GB 

10,000 

y 

y 


y 


y 

y 


Designwasp (http://designwasp.com) 

Business 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 


y 


y 

y 
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Get your listing highlighted! Contact Richard 
© richard.rust@imagine-publishing.co.uk 
0+44(0)1202586436 hosting listings 



Featured host of the month: Blackfoot Hosting www.blackfoot.co.uk 

Offering more reasons for choosing one of the listed providers 

Blackfoot is an experienced UK-based web-hosting provider 
with a proven pedigree in offering hosting and domain name 
registration services since 1999. Specialising in Linux-based 
servers, housed across three London data centres, Blackfoot promises 
24/7 monitoring and a dedicated support team to guarantee uptime 


and first-class delivery. Hosting options are available in five flavours 
ranging from the entry-level Home solution for £40 per year, up to 
the powerful eCommerce, Professional and Partner packages priced 
between £100-200. All come with access to the feature-packed cPanel 
control panel for intuitive maintenance. 




NAME AND URL 



Designwasp (http://designwasp.com) 

Windows Unlimited 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 


y 


y 

y 


Designwasp (http://designwasp.com) 

Windows Home 

0844 372 9848 

£40 

10GB 

50GB 

1,000 

/ 

y 


y 


y 

y 


Designwasp (http://designwasp.com) 

CheapHost 

0844 372 9848 

£10 

300MB 

100MB 

5 




y 



y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal 

01865 589 990 

£12 

1GB 

Unlimited 

10 

/ 



y 

y 

y 

y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal Plus 

01865 589 990 

£48 

Unlimited 

Unlimited 

50 

/ 



y 

y 

y 

y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Business 

01865 589 990 

£108 

5GB 

Unlimited 

1000 

/ 

y 


y 

y 

y 

y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Business Professional 

01865 589 990 

£132 

Unlimited 

Unlimited 

Unlimited 

/ 

y 


y 

y 

y 

y 


Domaincheck (www.domaincheck.co.uk) 

Bronze Linux 

0191 2612252 

£30 

100MB 

1GB 

5 


y 

y 

y 

y 

y 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Gold Linux 

0191 2612252 

£100 

500MB 

5GB 

25 

/ 

y 

y 

y 

y 

y 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Bronze Windows 

01912612252 

£30 

100MB 

1GB 

5 


y 

y 

y 

y 

y 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Gold Windows 

0191 2612252 

£100 

500MB 

5GB 

25 

/ 

y 

y 

y 

y 

y 

y 

y 

Donhost (www.donhost.co.uk) 

Reseller Unix 

0845 226 5566 

£399.99 

Unlimited 

Unlimited 

Unlimited 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Reseller Windows 

0845 226 5566 

£499.99 

Unlimited 

Unlimited 

Unlimited 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Enterprise 

0845 226 5566 

£89.99 

1GB 

2GB 

250 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Commerce 

0845 226 5566 

£179.99 

2GB 

5GB 

500 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Designer 

0845 226 5566 

£119.99 

1GB 

2GB 

250 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Developer 

0845 226 5566 

£259.99 

2GB 

5GB 

500 

y 


y 

y 

y 

y 

y 


eHosting (www.ehosting.com) 

Starter 

0844 999 4100 

£23.88 

1GB 

25GB 

10 






y 

y 

y 

eHosting (www.ehosting.com) 

Personal 

0844 999 4100 

£59.88 

2.5GB 

Unlimited 

50 

y 





y 

y 

y 

eHosting (www.ehosting.com) 

Expert 

0844 999 4100 

£95.88 

5GB 

Unlimited 

250 

y 





y 

y 

y 

eHosting (www.ehosting.com) 

Virtual 

0844 999 4100 

£227.88 

50GB 

Unlimited 

Unlimited 

y 




y 

y 

y 

y 

Equiphase (www.equiphase.net) 

Bronze 

0121 314 4865 

£30 

200MB 

2GB 

10 

y 

y 


y 


y 

y 

y 

Equiphase (www.equiphase.net) 

Silver 

0121 314 4865 

£42 

400MB 

5GB 

20 

y 

y 


y 


y 

y 

y 

Equiphase (www.equiphase.net) 

Gold 

0121 314 4865 

£72 

800MB 

10GB 

100 

y 

y 


y 


y 

y 

y 

Equiphase (www.equiphase.net) 

Platinum 

0121 314 4865 

£114 

1,200MB 

40GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Email Only 

02380 249 823 

£40 

1GB 

2GB 

10 



y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Essential 

02380 249 823 

£75 

2GB 

5GB 

10 



y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Superior 

02380 249 823 

£140 

5GB 

10GB 

25 

y 

y 

y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Premium 

02380 249 823 

£250 

10GB 

25GB 

100 

y 

y 

y 

y 

y 

y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Starter 

N/A 

£29.99 

500MB 

1GB 

3 

y 

y 

y 

y 


y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Home 

N/A 

£54.99 

2.5GB 

30GB 

50 

y 

y 

y 

y 


y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Business 

N/A 

£79.99 

6.5GB 

Unlimited 

Unlimited 

y 

y 

y 

y 


y 

y 

y 

Evohosting (www.evohosting.co.uk) 

eCommerce 

N/A 

£159.99 

30GB 

Unlimited 

Unlimited 

y 

y 

y 

y 


y 

y 

y 


Giacom (www.giacom.com) 

Business Pro 

0800 542 7500 

£199 

100MB 

2GB 

100 

/ 

y 

y 

/ 

y 

y 

y 

y 


Personal 

08081686777 

£32.87 

5GB 

Unlimited 

50 

/ 

X 

y 

/ 

y 

y 

y 

X 


Business Bronze 

08081686777 

£58.38 

50GB 

Unlimited 

500 

/ 

Option 

/ 

/ 

y 

y 

y 

X 


Business Silver 

08081686777 

£76.39 

Unlimited 

Unlimited 

Unlimited 

/ 

Option 

/ 

/ 

y 

y 

y 

X 

Fasthosts 

Business Gold 

08081686777 

£101.89 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

y 

y 

y 

X 

www.fasthosts.co.uk 

WD Starter 

0808168 6777 

£149.99 

20GB 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

y 

y 

y 

X 


WD Advanced 

08081686777 

£199.99 

Unlimited 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

y 

y 

y 

X 

Heart Internet (www.heartinternet.co.uk) 

Starter Professional 

0845 644 7750 

£29.80 

2.5GB 

10GB 

1,000 




/ 


y 

y 

/ 

Heart Internet (www.heartinternet.co.uk) 

Home Professional 

0845 644 7750 

£89.99 

10GB 

50GB 

10,000 

/ 

y 


/ 


y 

y 

/ 

Heart Internet (www.heartinternet.co.uk) 

Business Professional 

0845 644 7750 

£129.99 

Unlimited 

Unlimited 

Unlimited 

y 

y 


/ 


y 

y 

y 

Heart Internet (www.heartinternet.co.uk) 

Reseller Professional 

0845 644 7750 

£299.99 

Unlimited 

Unlimited 

Unlimited 

y 

y 


/ 


y 

y 

y 

Hostway (www.hostway.co.uk) 

Silver 

08081801880 

£79.50 

150MG 

3GB 

5 


Option 

y 

/ 


y 

y 


Hostway (www.hostway.co.uk) 

Gold 

08081801880 

£139.50 

300MB 

5GB 

10 

y 

Option 

y 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Gold Plus 

08081801880 

£189.50 

450MB 

10GB 

30 

y 

Option 

y 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Platinum 

08081801880 

£359.50 

600MB 

20GB 

50 

y 

Option 

y 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Platinum Plus 

08081801880 

£599.50 

1.2GB 

40GB 

10 

y 

Option 

y 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Email Plus 

08081801880 

£49.95 

50MB 

N/A 

5 

N/A 

N/A 

N/A 

/ 


y 

y 


ICUK www.icukhosting.co.uk 

Professional 

0845 009 9175 

£30 

250MB 

1GB 

50 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Advanced 

0845 009 9175 

£50 

2GB 

2.5GB 

150 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Enterprise 

0845 009 9175 

£80 

2GB 

500MB 

Unlimited 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Professional Plus 

0845 009 9175 

£90 

500MB 

5GB 

100 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Premium Plus 

0845 009 9175 

£150 

1GB 

12.5GB 

500 

y 

y 

option 

/ 

y 

y 

y 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 

•Unlimited websites • Use your own brand throughout 
• Unlimited bandwidth • 24/7 expert U K-based support 
•Unlimited web space • No-risk trial - 3 months free 


I Hosting listings 

Keep an eye on the latest packages 

and deals with our comprehensive list of service providers 


Discover what an enhanced 
listing can do for your 
business. Contact Richard on: 

Q 444(0)1202586436 

Continued... 


NAME AND URL 


ICUK www.icukhosting.co.uk 

ICUK www.icukhosting.co.uk 

ICUK www.icukhosting.co.uk 

ICUK www.icukhosting.co.uk 

JAB Web Hosting (www.jabwebhosting.com) 

JAB Web Hosting (www.jabwebhosting.com) 

JAB Web Hosting (www.jabwebhosting.com) 

JAB Web Hosting (www.jabwebhosting.com) 

JAB Web Hosting (www.jabwebhosting.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

Media Temple (http://mediatemple.net) 



Enterprise Plus 
Reseller Windows 
Reseller Linux 
Reseller Enterprise 
Mail - M105 
Home - H25 
Professional - P55 
Reseller-R25 
Reseller-R105 
Blog 
Starter 
Starter 
Dynamic 
Premium 
Unlimited 
LD Budget (Linux) 

LD Home (Linux) 

LD Pro (Linux) 

LD Unlimited (Linux) 
Windows Home 
Windows Unlimited 
Shared-Server Pro 


0845 009 9175 

£300 

2GB 

20GB 

Unlimited 

/ 

y 

option 

/ 

/ 

y 

y 


0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

option 

/ 

/ 

y 

y 


0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

option 

/ 

/ 

y 

y 


0845 009 9175 

£500 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

option 

/ 

/ 

y 

y 


0800 043 0153 

£15.17 

256MB 

3GB 

50 




/ 

/ 

y 

y 

y 

0800 043 0153 

£24.47 

1GB 

8GB 

50 

/ 



/ 

/ 

y 

y 

y 

0800 043 0153 

£45 

2GB 

15GB 

75 

/ 

y 


/ 

/ 

y 

y 

y 

0800 043 0153 

£97.88 

2GB 

30GB 

250 

/ 

y 


/ 

/ 

y 

y 

y 

0800 043 0153 

£271.60 

4GB 

Unlimited 

Unlimited 

/ 

y 


/ 

/ 

y 

y 

y 

01438 342 490 

£20 

100MB 

1GB 

5 



/ 

/ 

V 

y 

y 

y 

01438 342 490 

£30 

1GB 

1GB 

10 



/ 

/ 

y 

y 

y 

y 

01438 342 490 

£30 

1GB 

1GB 

10 



/ 

/ 

y 

y 

y 

y 

01438 342 490 

£50 

2GB 

2GB 

20 

/ 

y 

/ 

/ 

y 

y 

y 

y 

01438 342 490 

£80 

5GB 

5GB 

50 

/ 

y 

/ 

/ 

y 

y 

y 

y 

01438 342 490 

£120 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

/ 

/ 

y 

y 

y 

y 

07891235858 

£11.88 

1GB 

1GB 

500 

/ 

y 


/ 

y 

y 

y 


07891235858 

£23.88 

10GB 

10GB 

5,000 

/ 

y 


/ 

y 

y 

y 


07891235858 

£41.88 

50GB 

50GB 

20,000 

/ 

y 


/ 

y 

y 

y 


07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 


/ 

y 

y 

y 


07891235858 

£17.88 

2GB 

2GB 

1,000 

/ 

y 


/ 

y 

y 

y 


07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 


/ 

y 

y 

y 


+1 310 841 5500 

£64 

2GB 

1TB 

1,000 

y 

y 

/ 

/ 

y 

y 

y 

y 


\\NameHOG e 

ff Affordable Internet Solutions 

NameHOG www.namehog.net 

EMAIL ONLY 

STARTER 

HOME PRO 

BUSINESS 

01604212 904 

01604212 904 

01604212 904 

01604212 904 

£11.99 

£36.99 

£59.99 

£109.99 

2.5GB 

10GB 

25GB 

Unlimited 

15GB 

150GB 

Unlimited 

Unlimited 

10 

Unlimited 

Unlimited 

Unlimited 

X 

X 

/ 

/ 

X 

X 

/ 

/ 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Startup Plus 

0845 363 3632 

£89.99 

500MB 

5GB 

10 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Business 

0845 363 3632 

£149.99 

2,000MB 

20GB 

100 



y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Business Plus 

0845 363 3632 

£89.99 

3,000MB 

30GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Designer 

0845 363 3632 

£239.88 

1GB 

20GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Designer Plus 

0845 363 3632 

£479.88 

Unlimited 

30GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


DEVELOPER 

0800 0612801 

£32.89 

1GB 

Unlimited 

500 

y 

y 

y 

y 

y 

y 

y 

y 

i J i 

ONE 

0800 0612801 

£109.99 

5GB 

Unlimited 

1000 

y 

y 

y 

y 

y 

y 

y 

y 


RESELLER 

0800 0612801 

£274.89 

Unlimited 

Unlimited 

1000 

y 

y 

y 

y 

y 

y 

y 

y 

Netcetera www.netcetera.co.uk 

VM500 Server 

0800 0612801 

£300 

20GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


2200DC Server 

0800 0612801 

£720 

160GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


3000DC Server 

0800 0612801 

£1,200 

2x500GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


2600QC Server 

0800 0612801 

£1,800 

2x500GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


Netplan (www.netplan.co.uk) 

Shared 100 

02071000 424 

£60 

100MB 

1GB 

5 

/ 

y 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

VS100 

02071000 424 

£600 

5GB 

5GB 

5 

/ 

y 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

VS200 

02071000 424 

£1,000 

10GB 

10GB 

10 

/ 

y 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

VS300 

02071000 424 

£2,000 

15GB 

50GB 

20 

/ 

y 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

Dedicated Servers 

02071000 424 

£3,000+ 

73GB+ 

1,500GB 

100+ 

/ 

y 

y 

y 

y 

y 

y 

y 

PurplePaw (www.purplepaw.co.uk) 

Email 

N/A 

£25 

100MB 

1GB 

10 



y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

Play 

N/A 

£40 

100MB 

1GB 

10 



y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

Plus 

N/A 

£65 

750MB 

5GB 

25 

y 

y 

y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

Power 

N/A 

£95 

2GB 

10GB 

100 

y 

y 

y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

R3 Reseller 

N/A 

£660 

10GB 

50GB 

Unlimited 

y 

y 

y 

y 


y 

y 


Reddex UK (www.reddexuk.com) 

Reddex Design Starter 

0843 289 4625 

£18 

1GB 

Unlimited 

10 

y 


y 

y 

y 

y 

y 

y 

Reddex UK (www.reddexuk.com) 

Reddex Design Business 

0843 289 4625 

£59.88 

10GB 

Unlimited 

100 

y 

y 

y 

y 

y 

y 

y 

y 

Reddex UK (www.reddexuk.com) 

Reddex Design Premium 

0843 289 4625 

£107.88 

100GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 

Skymarket (www.skymarket.co.uk) 

Standard 1 

0800 321 7788 

£49 

10MB 

2GB 

1 

y 


y 

y 

y 

y 

y 

y 

Skymarket (www.skymarket.co.uk) 

Standard 2 

0800 321 7788 

£69 

20MB 

2GB 

1 

y 


y 

y 

y 

y 

y 

y 
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In association with 




fost/iosts 


Can you 
recommend 
your host? 



Get your listing highlighted! Contact Richard 
© richard.rust@imagine-publishing.co.uk 
0 + 44 ( 0)1202586436 


Tweet us today with your 
hosting comments and advice 

Q @WebDesignerMag 




NAME AND URL 


Skymarket (www.skymarket.co.uk) 

Skymarket (www.skymarket.co.uk) 

STRATO Hosting (www.strato-hosting.co.uk) 
STRATO Hosting (www.strato-hosting.co.uk) 
STRATO Hosting (www.strato-hosting.co.uk) 
STRATO Hosting (www.strato-hosting.co.uk) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 

Swish Hosting (www.swishhosting.co.uk) 

Swish Hosting (www.swishhosting.co.uk) 

Swish Hosting (www.swishhosting.co.uk) 

Swish Hosting (www.swishhosting.co.uk) 

Swish Hosting (www.swishhosting.co.uk) 
Switch Media (www.switchmedia.com) 

Switch Media (www.switchmedia.com) 

Switch Media (www.switchmedia.com) 
thename.co.uk (www.thename.co.uk) 
thename.co.uk (www.thename.co.uk) 
thename.co.uk (www.thename.co.uk) 

Tidy Web Hosting (www.tidywebhosting.co.uk) 
Tidy Web Hosting (www.tidywebhosting.co.uk) 
Tidy Web Hosting (www.tidywebhosting.co.uk) 
Tidy Web Hosting (www.tidywebhosting.co.uk) 
Tidy Web Hosting (www.tidywebhosting.co.uk) 
TwentyHost (www.twentyhost.co.uk) 
TwentyHost (www.twentyhost.co.uk) 
TwentyHost (www.twentyhost.co.uk) 
TwentyHost (www.twentyhost.co.uk) 
VARiHOST (www.varihost.net) 

VARiHOST (www.varihost.net) 

VARiHOST (www.varihost.net) 

WebFusion (www.webfusion.co.uk) 

WebFusion (www.webfusion.co.uk) 

WebFusion (www.webfusion.co.uk) 

WebFusion (www.webfusion.co.uk) 

Web Wiz (www.webwiz.co.uk) 

Web Wiz (www.webwiz.co.uk) 

Web Wiz (www.webwiz.co.uk) 



Premium 1 
Premium 2 
STRATO BasicWeb 
STRATO PowerWeb 
STRATO AdvancedWeb 
STRATO EnterpriseWeb 
Trial (3 month) 

Starter 

Personal 

Plus 

Multisite 

Email 

Windows Hosting 

Linux Hosting 

eCommerce 

SiteBuilder 

Switch Standard 

Switch Business 

Business Pro 

Parking 

Forwarding 

Hosting 

Entry 

Home 

HomePro 

Business 

BusinessPro 

Basic5S 

Standard5S 

Business5S 

Advanced5S 

WordPress Basic 

WordPress Plus 

WordPress Extra 

Fusion Professional 

Fusion Business 

Fusion Developer 

Fusion Reseller 

Windows Starter 

Windows Professional 

Windows Starter Reseller 


0800 321 7788 
0800 321 7788 
00800 8007 0070 
00800 8007 0070 
00800 8007 0070 
00800 8007 0070 
0844 9411000 
0844 9411000 
0844 9411000 
0844 9411000 
0844 9411000 
08445 67 69 71 
08445 67 69 71 
08445 67 69 71 
08445 67 69 71 
08445 67 69 71 
0151 236 9111 
0151 236 9111 
0151 236 9111 
0870 765 6364 
0870 765 6364 
0870 765 6364 
0844 884 9100 
0844 884 9100 
0844 884 9100 
0844 884 9100 
0844 884 9100 
0845 641 0776 
0845 641 0776 
0845 641 0776 
0845 641 0776 
0208144 7057 
0208144 7057 
0208144 7057 
08451301602 
08451301602 
08451301602 
08451301602 
0844 3581450 
0844 3581450 
0844 3581450 


■L’N 

Bronze (Linux) 

08450589000 

£47.88 

2GB 

20GB 

10 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Silver (Linux) 

08450589000 

£95.88 

5GB 

50GB 

25 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

r737 ' 

Gold (Linux) 

08450589000 

£143.88 

10GB 

100GB 

50 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

r - T Jd_k 

Platinum (Linux) 

08450589000 

£239.88 

50GB 

250GB 

100 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Reseller (Linux) 

08450589000 

£479.88 

150GB 

500GB 

250 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

|0 

Designer (Windows) 

08450589000 

£59.88 

2GB 

20GB 


/ 

X 

X 

/ 

/ 

/ 

/ 

X 

Zen Internet www.zen.co.uk 

Developer (Windows) 

08450589000 

£179.88 

10GB 

100GB 


/ 

X 

X 

/ 

/ 

/ 

/ 

X 


Golden rules to top hosting We identify and explain the key criteria for success... 


The best 

resources for you 

Selecting your ideal package is largely 
determined by the kinds of resources and quantity 
of features you require from your hosting solution. 
Key criteria like web space and monthly bandwidth 
are important for those services likely to be 
subjected to heavy amounts of traffic, which is 
why package solutions for enterprise applications 
are typically much more expensive. The general 
rule of thumb is not to buy more than you need or 
underestimate potential requirements... 


Competitive 
and reliable 

The hosting market is big business and 
hosting providers do try to drive prices down 
in a bid to entice your custom. Use our chart to 
compare costs, but be sure to visit the vendor 
websites to keep track of the latest deals, as 
they change. Remember that low price should 
not always be a deciding factor and that paying 
a premium for a more reliable, trusted and 
experienced vendor can offer you much better 
value for money in the long term. 


Putting you 
in control 

Modern hosting is all about giving 
customers the power to set up, monitor and 
maintain their web space with minimal fuss. Most 
commercial vendors offer access to award-winning 
and intuitive control panels that enable you to log 
in remotely and intuitively tweak your account, 
without the need to relay complicated instructions 
down the phone. Be sure to find out from your 
potential host as much as you can about the 
control panel and request a demo. 


Fantastic 
customer support 

If all else fails and you need some 
extra help to get your hosting back online, then 
a commitment to future customer support is key. 
Many vendors offer a service-level agreement 
which outlines what you can expect here, however 
most will be more explicit about whether phone 
support is included or email contact is preferred. 
Think about what you need for peace of mind and 
factor good, comprehensive technical support 
against the price. 
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SPEEDUP 

WORDPRESS 

Leverage the power of a Content 
Delivery Network to keep your 
pages snappy 


MAKE 

INTERACTIVE 

GRAPHS 

Use the Rickshaw JavaScript library to 
make your statistics stand out 


INSIDE 
UX DESIGN 

Ten ways to make them click 


CREATE CUSTOM 
TWITTER CARDS 

Make bespoke Twitter pop-ups for 
professional results 


Visit the WEB DESIGNER online shop at 

imagneshop.co.uk 

for back issues, books and merchandise 


ALL IN YOUR LATEST 

Issue 205 on sale 

Thursday 10 January 2013 
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next month 











Design for a better web 



Add creativity and flair to your online projects 
with an essential range of training products for 
hobbyists and professionals 


SBllfffMWrT 

'st'inHnnELj 




DVDs 


Web Design: From Desktop 
to Dotcom eMag Vol. 1 

A visual guide to Flash, 
Dreamweaver and Photoshop. 
256 pages of walkthroughs 
on one disc! A project-based 
workout for any webslinger! 
Master tools, receive technical 
advice and read inspirational 
features. 

£4.99 






m 


SF-srS* 


Web Design Vol. 6 

Creative guides for designing 
next-gen websites. In-depth 
features to bring you up 
to speed on all the hottest 
technologies. Step-by-step 
tutorials showing you how to 
design amazing websites. 
£14.99 


Web Design Tips, Tricks & 
Fixes Vol. 1 

Filled with in-depth tutorials 
and advanced techniques, 
This book is perfect for any 
web designer looking for 
inspiration for their next site 
design. 

£14.99 


Web Designer eMag Vol. 1 

Enjoy 21 issues of Web 
Designer on one interactive 
disc. Over 1800 pages 
of expert tutorials, case 
studies & features. Plus 
bonus tutorial workshop files 
included. 

£4.99 


The Web Design Book Vol. 1 

Bringing you up to speed with the new digital 
landscape, this book will give you a tour of 
the latest developments in web design and 
show you how to use these new tools to 
create a truly original site. 

£14.99 


Web Designer eMag Vol. 2 

A complete archive of Web 
Designer magazine issues 137- 
148. Over 824 pages of cutting- 
edge trends and techniques! 
Free - 256 page Web Design 
Vol. 03 bookazine included in 
pdf format. 

£4.99 


de&gne'y 


£13.99 

Web Designer 
DVDs from... 


Become an ImagineShop 
customer and leave reviews of 
your favourite products. 


Order online 


imagjneshop. 


co.uk 



IMAGINE 

PUBLISHING 


& @imagineshopuk 
n /imagineshopuk 


MAGAZINES 


BOOKS 


DVDS 


DOWNLOADS 


GIFTS 



















in designer 


Classified Advertising 




Contact Nick On 
01202 586419 

nick.marrow@imagine-publishing.co.uk 


To Advertise In 


Read anything 

good lately? 

Shop for quality magazines, 
books and DVDs from 
Imagine Publishing 


rmagineshop.co.uk S 


trade secret 

noun {c} -tred si kribt - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 


4 Buy online from £15 +■ vat 
Eliminate spelling m retakes 
Reduced a bandon&d carls 


30 % reduction of keystrokes entering addresses 

^ Create a professional image for your clients 

SFmple inftegratFon with SDK & working examples 


For more details whit postcode-software.net or«n 0845 33 82 666 


'T'COMPILA 

Web Hosting You Con Ttusi 


We Are Offering 
15% OFF Award 
Winning Hosting! 


0843 506 8902 


W 


These are jest iotub od the trengflti you will enjoy wffti Compile ho&hngr 


first doss web hosting from a welf res peeled coinpariy 

Cnmpki ha\ haeti vofecC No. I h>- iH-n limra Maying- &udgar I IcH-lhq. Vtirvlowt ikying, 

E***'!Ki Ihy lrhU i.irK.l 11. i>fi. rji-..-j li hi il:#n pWOutaiS. WttbtKHl D-'iy.;Mr 

Award i. 

Comprehensive technical supped available 24/7 

Cam iv: ^ii kruiscrppHJii s-lafl uic uvaflahta vyj i+rjrf. tnvgil , -t :yiiir“ r.-j Ora 1 * 


Free Google Ad Word 5 voucher 


Wc* 0 ^ nl cnjr iHhw n Im<s AtAVivrt? 

E» IwtiHii JrtW 4Jnd £50. 

lifetime guarantee 

Wa alter □ ElPtimn aixirnrvliM&a'n mcin^ ho^ng pfrons and 
Clin llvrs only IIK wob iKJSflno coffiptflY'y fo f’.ikjt thh. 


Ccirripk it u loading wab hoLlktg cpmpnrry I ha I ha n boon prcwtelijnn a dually 
r ■ !-*+!■. . Ilvr - irv-*' i ■ lot -jv^r li v*ara ana con baail I! omr-i ■ ■■' ■■ alh 4 • ■■: 
cBwiPt, Wfl ota rniw olvhg yaw Iho chanra to jaln u\ al - ct ijMicks* laid, wiH-i a 
1 5 % -cfuaunl 1 ■. r.Kns nt- iriivtcjcv 


__ _ iDnmc 

vc4uefor 

To clcim your 15% discount Simply call on 0843 506 8902 rnatieyl 


or visit www.compila.com/webdesigner 


3 Capture+ 


from PostcodeAnywhere 


The Next Generation of International Address Finder 
optimise your checkout process with Capture+ 


The de-facto choice for address • 240+ countries supported 
look-up, second to none . Auto . comp | e ting addresses 

© Graze.com I • Find addresses on-the-move 


0800 047 0495 

www.postcodeanywhere.com/capture 


MAGAZINES BOOKS DVDS DOWNLOADS GIFTS 
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Classified Advertising 


01202 586419 


1&1 DOMAINS 


SECURE YOUR DOMAIN AND SAVE! 



TRUST THE UK's NO. 1 


With more than 11 million customer contracts, over £2 billion in 
annual turnover, 5000 employees, 18 million registered domains 
and 5 high-performance data centres, we are one of the world's 
largest web hosts and a leading domain registrar. 

y/ FULL DNS CONT^^H 

Complete DNS and Contact Management via our 
easy-to-use 1&1 Control Panel 


1&1DO 


MAIN 


APP 


Check and register domains on-the-go 


SUPPORT 

24/7 phone and e-mail support 



Starting at 



first year* 


Included with all 1&1 Domains: 

■ Subdomain creation and redirection 

■ Masked URL Forwarding 


MEMBER OF DOMAINS E-MAIL WEB HOSTING eCOMMERCE SERVERS 


united 



internet 


Call 0844 335 1211 or buy online 


www.1and1.co.uk 


* Offers apply to first year of registration. Second year and subsequent years will be charged at the regular price. Visit www.1and1.co.uk for full offer details, terms and conditions. Prices exclude VAT. 









iPad iPhone Android phone Android tablet Apple Mac Windows PC 

EtL 



3S0 Magazine 


3D Artis! 






























Imagine digital editions 
are a new and exciting 
way to experience our 
world-leading magazines 


To get the most out of your digital 
editions, be sure to enjoy all of our 
fantastic features, including: 

• Zoomable text and pictures 

• In-app browsing 

• Searchable text 

u 


E|Advanced,*5^ ■ 

Photoshop 

t rtmusm at ***** S I JiKW i to 1 ■ 




[LEND 

►n a ni HAf* a a 

To buy more Imagine digital editions and for the 
latest issues and best offers, please go to 


www.GreatDigitalMags.com 


>ur favourite 
r you want 


No Disc. No Problem 


Many of the files you’re looking for can be 
found on the magazine’s website 






















Smashing Magazine 


WordPress 

Back in 2006 when 
Smashing Magazine first 
appeared on the web it 
was using WordPress as 
its platform of choice and 
it’s with them to this day. 


Standard 

sidebar 

The sidebar - a standard 
component of WordPress 
- was a simple affair with 
all the usual elements 
including categories, 
pages and popular posts. 







! - 










Web 
design 
relic 




No logo 

The now well-known 
Smashing logo didn’t 
exist in 2006. The 
popular choice for 
WordPress sites was to 
use text wrapped in a 
<h1> tag. This was the key 
element for getting back 
to the homepage. 



Should Links Open In New 
Windows? 


Ill M W hskw ki#v i ni n.-rv 

WW-mwi * n s-im uitm mu* W™ 


Z."™ SMASHWajeBS 


■»«ii!».5±a 

| Ecm:m 4 _-!* ir^k-, 


Smashing Magazine www.smashingmagazine.com 

The site for professional web designers and developers has been 
supplying unmissable content and information since 2006 


Launched in 2006 Smashing Magazine 
has matured into one of the go-to 
resources for web designers and 
developers. The single sideways ‘S’ has 
come to represent a fountain of knowledge 
for web creatives. The website has grown 
along with the content, embracing the 
latest web technologies to ensure that it’s 
functional as well as beautiful. The design 
of the site, meanwhile, has stuck very 


much to the brand: the colours are still 
predominantly orange and the layout 
resembles its predecessors. 

The design elements have become a 
little more sophisticated and the layout 
more productive, but it’s behind the scenes 
where much of the development has 
happened. A prime example is the 
transition from a static site to an all 
screen-friendly responsive site. 


f The design of the site has stuck 
very much to the brand II# 
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Have you found 
your perfect 
partner yet? 


VolPunlimited 


SIP Trunks 
Ethernet to the Cloud 
MPLS Cloud Networks 
Support Portal 
Voice Optimised Broadband 
Microsoft © Lync Trunk 


Tel: 01202 612000 
Fax: 01202 612111 
Email: info@voip-unlimited.net 
www.voip-unli m ited. net 



The Possibilities are Unlimited 






- # heart internet - 

The next step in the evolution of servers 

HYBRID SERVERS 



Bridging the gap 
between VPS and 
Dedicated Servers 


GUARANTEED RAM 


DEDICATED HARD DISK DRIVE 
USING HARDWARE RAID 


k 


LOW SERVER CONTENTION RATE 




UK EXCLUSIVE 




DELL POWEREDGE R720XD SERIES 


HYBRID SERVERS 


Using a combination of dedicated resources and 
virtualisation technology, Hybrid Servers provide 
increased performance, power & stability. 

Hybrid Servers are perfect for multi-site hosting, 
design and development platforms, database and 
email servers, ecommerce, media streaming, 
data storage, hosting clients' websites and more. 


% 


ZERO I/O SHARE 


UNLIMITED BANDWIDTH 


From 


£59 


.99 per month 


FREE SSL 

CERTIFICATE 

WORTH 

£149 


£ / 


V 100% UK SUPPORT 24/7 


V FREE & INSTANT SETUP 


V 99.99% UPTIME SLA 


„ow 0845 644 7750 j|| heart internet 

Find out more www.heartinternet.co.uk/hybrid-servers www.heartinternet.co.uk 


Prices exclude VAT. 


Web hosting I Reseller hosting I VPS I Servers 



